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

Автор записи Автор: Hiway
Дата записи 4 ноября, 2008
45 комментариев к записи Выпадающее меню 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

Постовой:

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

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

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

Метки CSS, jQuery, верстка

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

Спасибо! 🙂

Спаибо! Красавчег

Не работает в ff

Вот ПРИМЕР, в 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 как положено ,код будет считаться валидным?
Например вставлю рисунки?

Если ваши рисунки будут еще обернуты в 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. В общем показывается все в разброс… с интервалом между подменю, добратья до последнего пункта нет возможности (закрывается). Может кто сталкивался с таким, Спасибо.

очень криво отрабатываются события, не рекомендую.

может ктонибудь подсказать как здесь можно обойтись без изображений

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

огромное прогромное спасибо) вы мой спаситель)))

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

Сверху в дауне оставь down:[‘downarrowclass’] и удали весь .apend()

Спасибо, хотел сделать на css, но тут эффекты прикольные, думаю возьму этот.

Спасибо!! одно вот только не пойму, как сделать чтобы открывалось не вправо, а влево

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

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

спасибо вы супер

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