Урок"Умное" раскрывающееся вертикальное меню на jquery за 2 минуты
Сейчас поговорим о том, как за 2 минуты сделать своё выпадающее меню, не обделённое мозгами, на скриптах, не прибегая к дополнительным модулям.
Допустим, у нас есть такое праймари меню:
- Топ 100
- Графика
- Абстракция
- Кино
- Компьютерная графика
Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать "умный" скрипт, который будет за этим следить.
Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:
<?php if ($primary_links): ?> <div id = "menu"><?php print menu_tree('primary-links'); ?></div> <?php endif; ?>
В общем, вывели меню. Для него подойдёт следующий css:
div#menu ul { padding: 0; } div#menu ul li { display: block; border-bottom: 1px solid #211f1b; margin-bottom: 5px; padding: 0; } div#menu ul li a { color:#211F1B; display:block; font-family:Verdana; font-size:18px; font-weight:bold; padding:5px 0; } div#menu ul li a:hover, div#menu ul li a.active, div#menu ul li a:active { color: #005693; text-decoration: none; outline: none; } div#menu ul ul { display: none; /* собственно, самое важное :) */ } div#menu ul ul li { border: none; margin: 0; } div#menu ul ul li a { font-size: 11px; padding-left: 20px; } div#menu ul ul li a:hover, div#menu ul ul li.active-trail a { background: #b7b7b7; color: #fff; } div#menu ul ul li.active-trail ul li a { background: #fff; color: #000; }
Теперь осталось создать скрипт, который будет раздвигать пункты меню, имеющие подменю. Создаём файл menu.js и добавляем туда такой текст:
$(document).ready(function() { $('div#menu>ul>li>a').click(function() { if ($(this).parent().find('ul').length) { $(this).parent().find('ul').slideToggle(200); return false; } }); });
Подключаем наш скрипт в шаблон. Чистим кэш. Проверяем, наслаждаемся.
Таким же образом можно сделать и горизонтальное меню, слегка поменяв css.
- Spleshka
- 24.10.2010
- 66289
Комментарии
Спасибо Жека)
2 вопроса:
1. чем отличается твой вывод праймари в пэдж тпл пхп от такого:
echo theme('links', $primary_links);
Что более кошерно?
2. Я вот много видел уроков по созданию всплывающего меню. И постоянно все ругают разработчика, мол "чего ты через джейквери делаешь, зачем подключать их, ведь можно и просто на css сделать". Вопрос: объясни, когда можно и нужно включать js ))
ЗЫ: после друпал-пива у меня тяжко с составлением слов в фразы, а ты вон 2 статьи забацал))
1. Вариант, который написал ты, выводит только верхний уровень меню. А вариант, который я использовал в этой статье - всё меню с вложениями.
2. В друпале в стандартной сборке идёт библиотека Jquery, поэтому ничего подключать не надо. Пару строк кода - и всё работает)
SplasH, спасибо за мануал. Как раз стоит задача создать такое меню. Позже отпишусь о результатах.
Жду впечатлений :)
Не работает, не раскрывается при наведении выпадающее меню
Оно должно работать не при наведении а при нажатии
Ок, заработало. Вопрос - как сделать чтобы меню обратно сворачивалось при нажатии?
подменю будет обратно сворачиваться при нажатии на пункт, которым ты раскрыл подменю. В скрипте ведь указана функция slideToggle(200) - это значит, что оно прячется, если раскрыто, и раскрывается, если закрыто
Сделал все, как описано автором, даже стили не менял. В исходном коде страницы проверяю - элементы менюшек есть, но они при нажатии на родительский элемент не выползают. В чем может быть дело? Вот он этот сайт.
Дело в том, что у тебя нигде нет подменю. Чтобы выводилось подменю, надо перейти в раздел /admin/build/menu-customize/primary-links и у пунктов, имеющих подменю, поставить галочку напротив развёрнутое(expanded). Должно помочь
Поставил. Все-равно не разворачивает.
Разобрался!
Файл menu.js должен быть таким:
$(document).ready(function(){
$("div#menu>ul>li>a").click(function() {
if ($(this).parent().find("ul").length) {
$(this).parent().find("ul").slideToggle(200);
return false;
}
});
});
И тогда все работает. Иначе событие нажатия на нужный элемент не фиксировалось.
Да, конечно. Совсем забыл про этот пунктик.
$(document).ready(function()
вешает на выполнение скрипт после загрузке сайта, когда DOM будет готов.Спасибо, поправил урок
Теперь следующий вопрос: когда расзорачиваю какое-либо подменю и кликаю на один из его элементов, то при загрузке этой страницы все пункты меню снова оказываются свернутыми. Как сделать, чтобы меню оставалось развернутым?
SplasH, бесконечно благодарен вам!!! Теперь меню работает как нужно.
При переходе по ссылке меню на новую страницу оно сворачивается. А как изменить код, чтобы сохранить развернутым подменю открытой страницы?
Вот эта строка сохраняет открытым подменю. Главное заменить #menu на айди вашего меню
Строил меню по аналогии вашему примеру, единственное отличие в моем случае - вложенность на 1 пункт больше, прикрутил стили по аналогии для 3го уровня, обнаружилось 2 проблемы:
1. При наведении на меню первого уровня, которое имеет дочерний элемент с дочернм 3м уровнем - 3й уровень тоже раскрывается, не знаю как победить, в стилях и jQuery настолько не силен.
2. В моем случае меню открывается при наведении. И если быстро провести по всем пунктам меню первого уровня, то можно наблюдать _все_ раскрытые меню, одновременно.
Если поможете победить - буду премного благодарен. Спасибо.
конечно можно победить, тут надо немного скрипт исправить. Если ты ещё не решил проблему - отпишись, я сделаю урок по трёхуровневому выпадающему меню (кстати, горизонтальное или вертикальное? )
Проблема решилась, меню переделывалось почти 5 раз и имеет теперь вложенность 4, работает видимо чудом =)
Но вы хорошо пишете, поэтому если напишите как правильно делать такие вещи, конечно же с удовольствием почитаю и приму к сведению.
В моем случае меню с первым горизонтальным уровнем и остальными вертикальными, выпадающими направо.
Большое спасибо... за скрипты, за помощь и общение. Конечно получилось не за 2 минуты, но получилось.
Дим, если бы ты скопировал на свой сайт меню из примера ничего не меняя - получилось бы 2 минуты :)
есть меню от ubercarta, выводиться в блок с айди дива block-uc_catalog-0, соотвественно в цсс я заменил menu на block-uc_catalog-0, в скрипте то же заменил, не знаю javascript, поэтому не могу разобраться, меню у меня формируются:
скрипте поменял menu на block-uc_catalog-0
выводяться только первый уровень списка - Ноутбук, вторая категория не появляется, скрипт подцепляеться шаблоном.
понимаю что в вашем цсс надо мне заменить active-trail на что то своё, но не моогу разобраться, запутался, не прошу за меня что то делать, кто может объясните где возможная ошибка. Очень рад что зашел на ваш сайт, уроки очень классные уже изучаю. но хочеться с менюшкой тоже разобраться.
Так должно заработать:
Конструкция $('div#block-uc_catalog-0>ul>li>span>a') подразумевает, что следующим уровнем вложения после div#block-uc_catalog-0 будет ul, после ul будет li, после li будет span, а после span сразу a, и без дополнительных тэгов между ними
Сделал как ты сказал, но все равно не расскрывается, вот можешь посмотреть меню http://new22.ru/ ,может все таки что то не так в скрипте, очень уж хочеться такое меню, сейчас еще до views добрался)) интересная штука)
у тебя ul следует не сразу после block-uc_catalog-0, поэтому и не работает :) Вот так заработает 100%
СПАСИБО!!! :YAHOO: заработало! Понял свою ошибку, буду теперь с CSS разбираться)))
Автор, неужели сложно, белять, сделать страницу с примером?
Попрошу тут не выражаться, тут приличное общество, во первых. Во вторых, что вам даст пример работающего меню? По моему, текстовое описание вполне ясно поясняет, что автор хотел получить от этого кода.
А подскажите как сделать, чтобы не по клипу разворачивалось, а при наведении?
Достаточно тут заменить событие, было:
стало
правда теперь нужно добавить еще немного кода, что бы когда вы убираете курсор с пункта он назад сворачивался
slideToggle тут совершенно не подходит, надо использовать slideDown, slideUp.
SlideToggle приводит к соврачиванию, если элемент развернут, и разворачиванию если элемент свернут. SlideToogle
Нашел решение
Автору спасибо! Все работает)
У меня такой вопрос: а как можно сделать, чтоб меню при клике не раскрывалось/сворачивалось, а выпадало, то есть как бы поверх контента, как на facebook'e, при клике на кнопку Аккаунт. Или тут совсем другой подход нужен? Подскажите, плиз. Спасибо.
та не, тут всего лишь css надо поменять - и всё будет. Поиграться с абсолютным позиционированием
А что, если при нажатии на родительский уровень надо, чтоб у него менялся бг (например стрелка вниз показывала по нажатию и соответсвенно оставалась в таком положении пока подменю развернуто)? Как это реализовать в скрипте?
Теперь при нажатии на верхний пункт меню у него появится класс expanded-item, на который в css можно навесить бэкграундом стрелку вниз
Спасибо за урок! Очень помогло.
Только есть один вопрос, как сделать, чтобы при клике на не ракрытый пункт меню закрывался тот который уже был раскрыт?
Спасибо:HAPPY::HAPPY:
подскажите плз. как можно это меню построить горизонтально так, чтобы одной строкой строилось основное меню а выпадающие элементы строились второй строкой по строчкой основного меню.
У меня меню раскрываеться, но не совсем так работает как надо. Почему то клик на родительский пункт меню и страница перезагружаеться и меню расходиться, а хотелось бычтобы только меню разьезжалось.
Значит у вас этот скрипт не работает. Он не перезагружает страницу.
4to-to a ne ponyal kuda zapisyvat' v kakoi css fail?
Не работает js в Drupal7 не могли бы Вы помочь?
Пробовал с jQuery.noConflict
Переименуйте все знаки ($) на jQuery
А как сделать не для $primary_links ,а для своего меню?
Этот код не работает
Что это за функция?
http://api.jquery.com/?ns0=1&s=close%28%29 нет такой функции... Автор отзовись!
Замените не работающую строку на эту:
Здравствуйте!
А как вывести не основное меню (primary), а список разделов словаря(Таксономия), и чтоб он тоже раскрывался?
Поставьте модуль taxonomy_menu и сделайте из таксономии меню :)
Помогите разобраться, пожалуйста. У меня drupal 7. Не выводятся подменю. Поставить в настройках галочку "Show as expanded" не дает никакого результата. Нужно еще что-то где-то настроить? Или в чем может быть проблема?
Вы наверно пытаетесь проделать это с main-menu ?
Поискать не пробовали ?
Да простит меня splash , ссылка на блог конкурента )))..
Большое спасибо. Так все работает
По читал обсуждение, очень Вы хорошо объясняете, но увы моих познаний в этой области не хватает, чтобы понять. Подскажите, как сделать чтобы подменю не сворачивалось после нажатия на него, чтобы оставалось открытым в этом моём варианте
а для Drupal 7 какой код использовать?
у меня выдает ошибку:
Поставила модуль jquerymenu , все нормально работает, но при отключении java, оно не раскрывается, в итоге сделала в друпале показать раскрытым. При включении java, теперь все меню показывается раскрытым, а мне нужно, что бы список был раскрытым, только в случаи отключения java
ДД! Спасибо за статью! Не подскажете, как можно сделать, чтоб выпадающие подпункты ложились поверх контента, который находится под первым пунктом меню?
Ах, простите, туплю, вопрос снимается!
А как дополнить функцией: Сворачивать неактивные пункты меню?? Может кто отзовется ?? Был бы оч. признателен
Комментировать