Главная Форум Гостевая книга Регистрация
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для ucoz » Менюшки » Меню на CSS+jQuery (гаражные двери)
Меню на CSS+jQuery (гаражные двери)
ВэйДлинДата: Воскресенье, 20.09.2009, 22:44 | Сообщение # 1
Админ
Группа: Администраторы
Сообщений: 100
Репутация: 3
Статус: Offline

Горизонтальное меню,характеризующееся тем,что при наведении курсора мыши на какой-либо из его пунктов,открывается как бы створка,за которой мы видим изображение.

Установка

в HEAD страницы подключаем стили и скрипты:
Code
<link href="css/style.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
   <script type="text/javascript" src="js/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'});
   $('#shutter2').css({backgroundPosition: '0px 0px'});
   $('#shutter3').css({backgroundPosition: '0px 0px'});
   $('#shutter4').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>

после тега
Code
<body>

вставляем карказ меню:
Code
<ul id="menuback">
   <li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
   <li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
   <li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
   <li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
   </ul>
Прикрепления: menu-jquery.rar(66Kb)
 
Форум » Скрипты для ucoz » Менюшки » Меню на CSS+jQuery (гаражные двери)
Страница 1 из 11
Поиск:
Главная | Форум

Конструктор сайтов - uCoz
Правообладателям
         
  Баннер   Баннер