Дропдаун, выпадающее меню с эффектами на jQuery
Хочу познакомить Вас с первой версией моего плагина для выпадающего меню. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.
В будущем я хочу модифицировать его до более универсальной версии, с возможностью отображения многоуровневой навигации как вертикальной так и горизонтальной. Но пока продемонстрирую те возможности которые можно наблюдать сейчас.
Пример №1 выпадающего меню (slide эффект):
Вы можете открыть пример в новом окне.
Рассмотрим детальнее структуру HTML и CSS кода для примера. Я опущу элементы которые не важны для выпадающего меню и отвечают за вид навигации и выделю лишь те которые нужны для плагина.
HTML код:
<li>
<a href="#">Навигация</a>
<div>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">MooTools</a></li>
<li><a href="#">JS Plugins</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</li>
...
<li>
<a href="#">Ссылки</a>
<div>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">MooTools</a></li>
<li><a href="#">JS Plugins</a></li>
</ul>
</div>
</li>
</ul>
Для выпадающего списка нам нужен родитель для манипулирования высотой объекта, это нужно для slide эффекта, с fade эффектом его можно не вставлять.
CSS код:
position:relative;
}
#nav li div {
position:absolute;
top:15px;
left:-9999px;
}
#nav li.hover div {left:0;}
Для родительского элемента лучше не задавать никаких стилей кроме позиционирования относительно родителя. самое главное на что хочу обратить Ваше внимание, для скрытия вложенного списка я использую left:-9999px; а не display:none, т.к. при display:none JavaScript не может адекватно определить текущие параметры элемента – высоту и т.п. В общем в примере стили очень просты, задается лишь положение вложенного элемента, конечно же вы можете определять дополнительные свойства соответствующие вашему дизайну.
Теперь детальнее по плагину:
<script type="text/javascript" src="js/jquery.dropDown.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#nav').NavDropDown({
duration:300,
hoverElement:'li',
hoverClass:'hover',
dropHolder:'div',
showEffect:'slide' // slide, fade, slide&fade
});
});
</script>
Детальнее по параметрам:
Показанные параметры являются параметрами по умолчанию.
- duration – время анимации в миллисекундах (300 = 0.3сек)
- hoverElement – элемент на который будет ставится класс “hover”.
- hoverClass – название класса для элемента при ховере
- dropHolder – селектор элемента родителя для вложенного списка
- showEffect – эффект выпадения вложенного списка (slide, fade, slide&fade)
Рассмотрим еще несколько примеров:
slide&fade эффект
$('ul#nav').NavDropDown({
duration:500,
showEffect:'slide&fade'
});
});
Вы можете открыть пример в новом окне.
fade эффект
$('ul#nav').NavDropDown({
duration:800,
showEffect:'fade'
});
});
Вы можете открыть пример в новом окне.
Скачать плагин
48 Коментариев to Дропдаун, выпадающее меню с эффектами на jQuery
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Добрый день, я недавно начал учить этот фреймворк и пока немного освоил апи, но сделал таеко меню
http://simpleweb.org.ua/jquery/jquery-dropdown-menyu-ili-rabota-s-api
нтересно ваше мнение
Приемлемое решение… но есть несколько но.
1) поводите быстро по навигации в разные стороны несколько раз, начнут открываться и закрываться дропы, данный плагин лучше реализовывать с помощью animate в котором есть параметр queue:false.
ли реализовать через задержки….
2) $(‘li ul’).hide (); -такой вариант скроет все подуровни не только в вашей навигации… а вобще по всей странице.
3) объекты лучше загонять в переменные, что бы при каждом ховере не искать их заново и не нагружать браузер,
что-то типа:
var _ul = $('> ul', this);
if (_ul.length) {
$(this).find('> a').addClass ('arrow');
$(this).hover(function(){
$(this).addClass('active');
_ul.fadeIn ();
}, function () {
$(this).removeClass('active');
_ul.fadeOut ();
});
}
});
Спасибо, поработаю над скриптом, подписался на рсс, еще бы хотелось держать контакт по асе
Забыл добавить, взял создал свой т.к. ваш не поддерживает многоуровность
Работаю в этом направлении… постараюсь в скором времени выложить более универсальный плагин с поддержкой многоуровневой структуры.
Здравствуйте.
Спасибо за плагин. Вопрос в следующем:
Отключаю JS — меню не раскрывается. Хотелось бы увидеть Ваш вариант отображения меню на чистом CSS, для случаев, когда скрипты у клиента отключены.
Сам в JS совсем не разбираюсь, до недавних пор верстал меню с помощью display:none (без привязки плагинов), а тут решил добавить эффект и прям-таки в замешательстве. Как двух зайцев поймать?
Буду признателен за совет.
Без JS можно сделать навигацию… да вот только такой вариант Е6 поддерживать не будет, для него все равно нужен JS или как минимум expression, т.к. Е6 не поддерживает псевдокласс :hover для всех тегов кроме
Ну да, само-собой с ие-6 разговор только такой. Однако и не часто пользователи IE отключают JS. До него там еще надо добраться :)
Расчет больше на пользователей Opera, Mozilla.
Однако, к чему спросил, мне непонятен сам принцип построения CSS для такого меню, без display:block — ищу информацию именно в этом направлении…
Постараюсь в скором будущем выложить данную методику… а конкретными примерами, на данный момент, не располагаю.
Большое спасибо :)
Добрый день.
Спасибо за плагинчик.
Но мне его теперь надо модифицировать под то, что нужно. Задача в том, чтобы при наведении выпадал не список, а картинка(типо облако), на которой бы были понкты-ссылки.
Пока что не получается, есть идеи?
А что мешает вставить картинку в список?
Я добавьте, пожалуйста, вертикальный дропдаун.
Спасибо за менюшку, плагин классный. Я попытался его приспособить под свои потребности на сайте, а именно: установил плагин для 12 отдельных позиций, в результате в Mozille все работает без проблем, а в IE меню отображается только для одной первой позиции. Можно ли это как-нибудь поправить? Страница сайта http://www.vitservice.net/index3.htm
Скорее всего проблема в том что у вас на улах стоит один и тот же id=”nav”, повести метод на класс, а id вообще удалите.
Спасибо за ответ, я тоже понял, что проблема в определении свойств єлементов. К сожалению не очень силен в CSS. Не подскажете, как поправить?
Здесь
уберите id=”nav”, а здесь
поменяйте на
Сделал все, как сказано, действительно IE все видит, но появились 2 нестыковки:
1. Выпадаюций список сдвинулся оносительно левой границы примерно на 35-40px;
2. Ячейки, в которых установлены меню, растянулись по вертикали, как-будто список остается раскрытым.
Если Вас не затруднит подскажите.
Очень благодарен за помощь.
Спасибо, вопрос решен.
Достаточно заменить только $(‘ul.example1′).NavDropDown({, а id=”nav” следует оставить, тогда все работает как надо.
у меня своеобразная задача:
нужно чтобы вываливалось меню не сразу при наведении на пункт меню, а через 2 секунды после наведения и оставлении курсора над пунктом меню. То есть нужна задержка в выпадании меню
Есть мысли как допилить данный скрипт под эти нужды?
Напишите в личку… я дам вам такой вариант.
Написал в личку по поводу задержки..
Написал в личку по поводу задержки.. setTimeout никак дописать в нужном месте не получается :)