Сегодня 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
Постовой:
Все нам полезно будет знать, что Максим.ру — это не блог певицы, это намного круче…
Для фрилансера кресло — это неотъемлемая важная часть рабочего места — кресло-мешок может попробовать поэкспериментировать?
Flammend
Спасибо! 🙂
рустем
Спаибо! Красавчег
serg
Не работает в ff
Hiway
ВотПРИМЕР , в FF работает сто процентов. Равно как и в других случаях. Если не работает у вас, значит не правильно реализовали.
sweedbes
Огромное вам спасибо. Вы единственный нормальный веб-мастер в сети, который сделал полезную вещь, сохранив архив и выложив сюда ссылку!
В других же сайтах, даются просто линк на пример. Чтобы реализовать нужно скачивать все по отдельному файлу, который в конце не будет работать в ИЕ6.
Респект и уважуха!
Серый
Спасибо! Только если два меню подряд поставить (само собой поменять id), то почему-то первое меню открывается под вторым (надо, чтобы открывалось поверх второго)
Серый
Нашёл решение: надо в стилевом файле добавить z-index:100;
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
z-index:100;
}
или в скрипте подставлять стиль z-index
Hiway
Правильно говорите о z-index, просто согласно расстановке индексов полей по умолчанию приоритет отдается нижнему элементу в DOM. Соответственно если вы к элементу применяете позиционирование отличное от
position:static
, которое используется по умолчанию, то приоритеты слоев меняются в сторону позиционируемого объекта.андрей
Одно из самых простых и удобных решений для построения таких менюшек
TonKhao
ОЛИЧНЫЙ СКРИПТ!!!!! СПАСИБО!
hAhol
Скрипт классный, но что-то у меня не работает так, как надо.. У меня таблица на весь экран, и я никак не могу заставить эту менюшку отображаться целиком поверх таблицы. Экспериментировал с z-index, однако отображается только первый уровень — папки. Ни стрелочек, ни выпадающих списков с элементами 1-го уровня. Никто не знает, с чем еще поэкспериментировать?
Эльдар
Спасибо, подошло, вопрос в следующем, если я использую конструкцию, где между открытывающим и закрывающим тегами ul будет другой текст, а не тели li как положено ,код будет считаться валидным?
Например вставлю рисунки?
Hiway
Если ваши рисунки будут еще обернуты в li, то да. А если нет, то нет.
howto?
как ево зделать вертикальным?
puper
Большое уважение тебе! Давно искал именно такое меню — HTML список, CSS, многоуровневость, а главное — при всем этом КРОСБРАУЗЕРНОСТЬ…
hiway
На здоровье! Но моих заслуг здесь мало 🙂
Riverain
большое спасибо, меню отличное)
а не подскажете, что изменить в скрипте, чтобы меню выпадало вверх?
mookmo
Классная штука. Но только не могу найти где для втростепенного блока меню установить параметр и откуда он берется
Вот это то, что генерирует скрипт.
element.style {
display:none;
left:0;
top:40px;
visibility:visible;
width:170px;
}
Мне нужно всего лишь установить top:34px; А вот где? 🙂
hiway
Вот сюда нужно вписать значения для позиционирования сверху
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
mookmo
Вписал туда ) не помогает.
Где-то скриптом под-менюшке присваивается доп. свойства.
vvmure
Добрый вечер, использую это меню и возникла проблема с отображением подпунктов меню в ИЕ6. В общем показывается все в разброс… с интервалом между подменю, добратья до последнего пункта нет возможности (закрывается). Может кто сталкивался с таким, Спасибо.
SerJey
очень криво отрабатываются события, не рекомендую.
chetnik
может ктонибудь подсказать как здесь можно обойтись без изображений
Андрей
Клёвая менюшка то что надо
— Быстродействие
— Идеально ровная без наложения меню на меню
— быстрочитаемость
— осталось только дизайн видоизменить и можно ставить =)
na2se4ka
огромное прогромное спасибо) вы мой спаситель)))
Philip
Хорошая менюшка, только народ кто знает как убрать вертикальную стрелочку в меню, мне надо место освободить )
Прошу скажите что вырезать то в скрипте?
Lik
Сверху в дауне оставь down:[‘downarrowclass’] и удали весь .apend()
Dimonyga
Спасибо, хотел сделать на css, но тут эффекты прикольные, думаю возьму этот.
Lik
Спасибо!! одно вот только не пойму, как сделать чтобы открывалось не вправо, а влево
Максим
Глючной, сырой скрипт.
Быстро потузаить курсором в районе меню потом оставить курсор в области меню (в выпадающем сегменте), и она начинает дрочится: выпадать и прятаться.
Подобные косяки делаю неприемлемым использования скрипта на нормальных сайтах. А для говносайта нормально
игорь
спасибо вы супер
Сергей
Меню простое и удобное.
Проблема следующая: у меня фоновый цвет меню (черный) и выпадающих блоков (серый) разный. При наведении на раздел его цвет совпадает с цветом выпадающего блока, то есть серым. Но когда курсор переводится на выпадающий блок, то цвет раздела становится изначальным. Получается выпавший блок серый, а цвет раздела возвращается к черному. Как сделать чтобы при перемещении курсора по выпадающему блоку цвет раздела вверху был таким же? (объяснил как мог)
alex
как однако сделать ее бесконечно многоуровневой ?
Hiway
alex
а так менюшка кульная, тока ишак как всегда slideIn криво кажет (
Игорь
Спасибо, первое анимированное меню, которое без бубна стало на вордпресс
Petr
Не подскажете, как выделить первый пункт меню другим цветом? .li first не помогает…
Hiway
4322
4322
Вот я выше прислал, у меня на сайте так и вышло(
Макс
Доброго дня! Подскажите, как сделать, чтобы подпункты меню выпадали при клике на на основной пункт в меню, а не при наведении на него.
Hiway
все для мобильных
отлично работает, спасибо 🙂