+

Красивое меню «Гаражные двери» для uCoz

Красивое меню «Гаражные двери» для uCoz
Цена: БЕСПЛАТНО
Просмотров: 1379
Добавлено: 26.05.2013
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: ОТСУТСТВУЕТ
Демо: Смотреть
Информация о материале
Красивое меню «Гаражные двери» для uCoz. Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше. При наведении на окошко с нужной категорией возникает эффект «Гаражной двери», то-есть затвор подымается, и появляется картинка. Меню можно настроить под свой вкус. Ваша фантазия, и эффект поразит Ваших посетителей. Советую посмотреть Демо меню.

Кстати, все скрипты и картинки желательно скопировать себе в Файловый Менеджер, чтоб не потерять и не искать их потом.

Установка меню

Вставляем это в CSS:
Код
* {margin:0px; padding:0px;}  
body { background:#c1c1c1;}  
a {outline-style: none;}  

ul#menuback {  
  margin: 50px auto;  
  list-style: none;  
  background: url(http://wallaby.ucoz.ru/images2/menu-bgss.jpg);  
  width: 800px;  
  overflow: auto;}  

ul#menuback li.shutter {  
  width: 200px;  
  height: 100px;  
  display: block;  
  float: left;}  

ul#menuback li#shutter1 {  
  background: url(http://wallaby.ucoz.ru/images2/shutter-africanplains.jpg) no-repeat;}  
ul#menuback li#shutter2 {  
  background: url(http://wallaby.ucoz.ru/images2/shutter-reptiles.jpg) no-repeat;}  
ul#menuback li#shutter3 {  
  background: url(http://wallaby.ucoz.ru/images2/shutter-aviary.jpg) no-repeat;}  
ul#menuback li#shutter4 {  
  background: url(http://wallaby.ucoz.ru/images2/shutter-arcticzone.jpg) no-repeat;}  

a.link {  
  width: 200px;  
  height: 100px;  
  display: block;  
  background: url(http://wallaby.ucoz.ru/images2/window.png) no-repeat bottom center;  
  text-indent: -9999px;}

Это вставляете где-нибудь между тегами <head> и </head>:
Код
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/jquery-1.2.6.min.js"></script>  
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/jquery.backgroundPosition.js"></script>  
<script type="text/javascript">  
$(document).ready(function() {  
//Set css in Firefox (Required to use the backgroundPosition js)  
$('#shutter1').css({backgroundPosition: '0px 0px'});  
//Animate the shutter  
$(".link").hover(function(){  
$(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );},  
function() {$(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );  
});  
});  
</script>

Ну и теперь вставляете код самого меню туда, где вы бы хотели его видеть:
Код
<ul id="menuback">
<li class="shutter" id="shutter1"><a class="link" href="ссылка">Пункт_1</a></li>
<li class="shutter" id="shutter2"><a class="link" href="ссылка">Пункт_2</a></li>
<li class="shutter" id="shutter3"><a class="link" href="ссылка">Пункт_3</a></li>
<li class="shutter" id="shutter4"><a class="link" href="ссылка">Пункт_4</a></li>
<a href="http://fullweb.ucoz.ru/" style="display: none;"></a>
</ul>

Все готово!

Теги: меню для сайта, «Гаражные двери», красивое меню, для uCoz, меню css, интересное меню
Комментарии (0)