xandeadx.ru Блог музицирующего веб-девелопера

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. Пример.

Похожие записи

Комментарии RSS

Аватар пользователя Виталий
Виталий, #

Мне этот плагин для построения выпадающего меню нравится много больше, чем superfish, он проще и отлаживать вид меню легче

Аватар пользователя Гость
Гость, #

Здравствуйте.
Данный вариант меню делается на одном только CSS.
И данный вариант меню имеет один огромный недостаток - ширина выпадающих меню задается фиксировано, нельзя сделать чтобы она определялась в зависимости от содержимого. То есть если в выпадающем меню будут ссылки по 3 символа в ширину, то справа просто будет куча свободного места и ничего с этим нельзя сделать.

Аватар пользователя Гость
Гость, #

Помогите новичку, установил это меню в ячейке страницы , не получается центровать. Скиньте источник как вообще научиться стилизовать меню, заранее благодарю

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании