Javascript → Лёгкое выпадающее меню на jQuery
В поисках лёгкого выпадающего меню наткнулся на jQuery плагин Simple jQuery Dropdowns. С помощью него, без лишней разметки, можно из любого списка сделать многоуровневое кроссбраузерное меню.
Подключение
Скачиваем плагин, распаковываем.
Подключаем скрипты:
<script type="text/javascript" src="jquery-1.3.1.min.js"></script> <script type="text/javascript" src="jquery.dropdownPlain.js"></script>
Подключаем стили:
<link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
Формируем список (важно чтобы у него был класс dropdown):
<ul class="dropdown"> <li><a href="#">Раздел 1</a> <ul> <li><a href="#">Подраздел 1</a></li> <li><a href="#">Подраздел 2</a></li> </ul> </li> <li><a href="#">Раздел 2</a> <ul> <li><a href="#">Подраздел 1</a></li> <li><a href="#">Подраздел 2</a></li> </ul> </li> </ul>
Если всё сделано правильно, вместо списка должно появится выпадающее меню.
Стилизация
С помощью CSS (файл style.css), меню можно стилизовать как угодно, например сделать аналог модуля admin_menu для Drupal. Пример.
Комментарии
Мне этот плагин для построения выпадающего меню нравится много больше, чем superfish, он проще и отлаживать вид меню легче
Здравствуйте.
Данный вариант меню делается на одном только CSS.
И данный вариант меню имеет один огромный недостаток - ширина выпадающих меню задается фиксировано, нельзя сделать чтобы она определялась в зависимости от содержимого. То есть если в выпадающем меню будут ссылки по 3 символа в ширину, то справа просто будет куча свободного места и ничего с этим нельзя сделать.
Помогите новичку, установил это меню в ячейке страницы , не получается центровать. Скиньте источник как вообще научиться стилизовать меню, заранее благодарю
Оставить комментарий