| Главная » Статьи » jQuery |
Slide меню
Кликаем по ссылке с классом "btn-slide”, выезжает панель с меню. <script type="text/javascript"> // когда страница загрузится $(document).ready(function(){ // вешаем обработчик на ссылку с классом "btn-slide" (верхнее меню) $(".btn-slide").click(function(){ // выдвигаем/прячем панель с id = panel1 $("#panel1").slideToggle("slow"); // изменяем класс самой ссылки $(this).toggleClass("active"); // и ничего не делаем дальше (дабы не было перехода по ссылки) return false; }); // вешаем обработчик на ссылку с классом "btn-slide2" (нижнее меню) $(".btn-slide2").click(function(){ // выдвигаем/прячем панель с id = panel2 $("#panel2").slideToggle("slow"); // изменяем класс самой ссылки $(this).toggleClass("active2"); // и ничего не делаем дальше (дабы не было перехода по ссылки) return false; }); }); </script> Slide меню 2 Slide-меню слева и справа страницы. Для начала приготовим HTML : <div class="left"> <!-- Непосредственно содержание меню, мы его прячем --> <div class="panel"> <ul> <li><a href="#" title="Элемент 1">Элемент 1</a></li> <li><a href="#" title="Элемент 2">Элемент 2</a></li> <li><a href="#" title="Элемент 3">Элемент 3</a></li> </ul> <ul> <li><a href="#" title="Элемент 1">Элемент 1</a></li> <li><a href="#" title="Элемент 2">Элемент 2</a></li> <li><a href="#" title="Элемент 3">Элемент 3</a></li> </ul> <ul> <li><a href="#" title="Элемент 1">Элемент 1</a></li> <li><a href="#" title="Элемент 2">Элемент 2</a></li> <li><a href="#" title="Элемент 3">Элемент 3</a></li> </ul> </div> <!-- Панелька с кнопкой --> <p class="slide"><a href="#" class="btn-slide">Меню</a></p> </div> У нас должно получиться что-то наподобие следующего:
Теперь создадим обработчик событий для ссылок с классом "btn-slide”: // создаем обработчик событий для ссылок с классом "btn-slide" $(".btn-slide").toggle(function(){ // ... 1-ый клик по ссылке // возвращаем false return false; },function(){ // ... 2-ой клик по ссылке // возвращаем false return false; }); Затем нам необходимо найти элемент с классом "panel” и выдвинуть его на 120 пикселей: // идем по DOM'у на 2-а уровня вверх, внутри элемента (это div c классом left/right) находим нужный нам элемент и приращиваем ему 120 пикселей в ширину $(this).parent().parent().find(".panel").animate({"width": "+=120px"}, "slow"); // заменяем класс кнопки (для изменение стрелочки) $(this).toggleClass("active"); Соединяем это вместе: $(document).ready(function(){ $(".btn-slide").toggle(function(){ $(this).parent().parent().find(".panel").animate({"width": "+=120px"}, "slow"); $(this).toggleClass("active"); return false; },function(){ $(this).parent().parent().find(".panel").animate({"width": "-=120px",opacity: "hide"}, "slow"); $(this).toggleClass("active"); return false; }); }); Drop-down меню Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):
Ну и собственно сам HTML: <div class="topmenu"> <li><a href="#" title="Элемент 2.1">Элемент 2.1</a></li> </li> Далее нам необходимо добавить обработчик для события hover для элементов li $('.topmenu ul li').hover( function() { // ... }, function() { // ... } ); А теперь всё вместе: $(document).ready(function(){ $('.topmenu ul li').hover( function() { $(this).addClass("active"); $(this).find('ul').stop(true, true); // останавливаем всю текущую анимацию $(this).find('ul').slideDown(); }, function() { $(this).removeClass("active"); $(this).find('ul').slideUp('fast'); } ); }); | |
| Просмотров: 983 | Рейтинг: 0.0/0 |
В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.
| Всего комментариев: 0 | |
