Рубрики
Верстальщику

Выпадающее меню XHTML+CSS+jQuery

Сегодня Dynamic Drive выложили прикольный вариант выпадающего меню с использование эффектов jQuery. Это многоуровневое меню, которое оформлено в виде многоуровневого HTML-списка и преобразованное в полноценное выпадающее меню с использованием чистого CSS и с применением эффектов jQuery. Весьма полезной «фичей» здесь является то, что выпадающее меню автоматически меняет место расположения если находится слишком близко к неактивной области рабочего окна.

Посмотреть как это работает можно здесь

Меню требует вот эти внешние файлы:

  • jqueryslidemenu.css
  • jqueryslidemenu.js (в этом файле вам стоит проверить и при необходимости переписать изображения к картинкам представленным ниже )

Еще один файл, который в оригинальном примере был взят из удаленного источника http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js, я вставил в архив с примером, но при желании вы можете использовать указанный выше путь. Лично мне очень понравился данный вариант реализации меню, тем более, что его достаточно легко интегрировать в нужную CMS.

Всем кому понравилась демка можно скачать архив с вложенным jquery.min.js, тоесть уже готовым локальным решением.

Загрузить
Загрузить

Оригинал решения: jQuery Multi Level CSS Menu #2

Постовой:

Все нам полезно будет знать, что Максим.ру — это не блог певицы, это намного круче…

Для фрилансера кресло — это неотъемлемая важная часть рабочего места — кресло-мешок может попробовать поэкспериментировать?

посадка деревьев

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

  1. Простой способ добавить выпадающее меню к любой теме Drupal
  2. Javascript и XHTML
  3. XHTML 2 против HTML 5
  4. Как определить тип и версию браузера с использованием JQuery
  5. jQuery. Подробное руководство по продвинутому JavaScript

45 ответов к “Выпадающее меню XHTML+CSS+jQuery”

Вот ПРИМЕР, в FF работает сто процентов. Равно как и в других случаях. Если не работает у вас, значит не правильно реализовали.

Огромное вам спасибо. Вы единственный нормальный веб-мастер в сети, который сделал полезную вещь, сохранив архив и выложив сюда ссылку!
В других же сайтах, даются просто линк на пример. Чтобы реализовать нужно скачивать все по отдельному файлу, который в конце не будет работать в ИЕ6.

Респект и уважуха!

Спасибо! Только если два меню подряд поставить (само собой поменять id), то почему-то первое меню открывается под вторым (надо, чтобы открывалось поверх второго)

Нашёл решение: надо в стилевом файле добавить z-index:100;
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
z-index:100;
}
или в скрипте подставлять стиль z-index

Правильно говорите о z-index, просто согласно расстановке индексов полей по умолчанию приоритет отдается нижнему элементу в DOM. Соответственно если вы к элементу применяете позиционирование отличное от position:static, которое используется по умолчанию, то приоритеты слоев меняются в сторону позиционируемого объекта.

Скрипт классный, но что-то у меня не работает так, как надо.. У меня таблица на весь экран, и я никак не могу заставить эту менюшку отображаться целиком поверх таблицы. Экспериментировал с z-index, однако отображается только первый уровень — папки. Ни стрелочек, ни выпадающих списков с элементами 1-го уровня. Никто не знает, с чем еще поэкспериментировать?

Спасибо, подошло, вопрос в следующем, если я использую конструкцию, где между открытывающим и закрывающим тегами ul будет другой текст, а не тели li как положено ,код будет считаться валидным?
Например вставлю рисунки?

Большое уважение тебе! Давно искал именно такое меню — HTML список, CSS, многоуровневость, а главное — при всем этом КРОСБРАУЗЕРНОСТЬ…

большое спасибо, меню отличное)
а не подскажете, что изменить в скрипте, чтобы меню выпадало вверх?

Классная штука. Но только не могу найти где для втростепенного блока меню установить параметр и откуда он берется
Вот это то, что генерирует скрипт.
element.style {
display:none;
left:0;
top:40px;
visibility:visible;
width:170px;
}

Мне нужно всего лишь установить top:34px; А вот где? 🙂

Вот сюда нужно вписать значения для позиционирования сверху

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

Добрый вечер, использую это меню и возникла проблема с отображением подпунктов меню в ИЕ6. В общем показывается все в разброс… с интервалом между подменю, добратья до последнего пункта нет возможности (закрывается). Может кто сталкивался с таким, Спасибо.

Клёвая менюшка то что надо
— Быстродействие
— Идеально ровная без наложения меню на меню
— быстрочитаемость
— осталось только дизайн видоизменить и можно ставить =)

Хорошая менюшка, только народ кто знает как убрать вертикальную стрелочку в меню, мне надо место освободить )
Прошу скажите что вырезать то в скрипте?

Глючной, сырой скрипт.
Быстро потузаить курсором в районе меню потом оставить курсор в области меню (в выпадающем сегменте), и она начинает дрочится: выпадать и прятаться.

Подобные косяки делаю неприемлемым использования скрипта на нормальных сайтах. А для говносайта нормально

Меню простое и удобное.
Проблема следующая: у меня фоновый цвет меню (черный) и выпадающих блоков (серый) разный. При наведении на раздел его цвет совпадает с цветом выпадающего блока, то есть серым. Но когда курсор переводится на выпадающий блок, то цвет раздела становится изначальным. Получается выпавший блок серый, а цвет раздела возвращается к черному. Как сделать чтобы при перемещении курсора по выпадающему блоку цвет раздела вверху был таким же? (объяснил как мог)

alex изначально это заложено уже в CSS меню. Количество уровней зависит только от количества вложенных списков.

Petr Ну если правильно то li:first-child, это если использовать псевдоселектор. А если у первого пункта есть класс first, то li.first

Доброго дня! Подскажите, как сделать, чтобы подпункты меню выпадали при клике на на основной пункт в меню, а не при наведении на него.

Добавить комментарий

Ваш адрес email не будет опубликован.