Сегодня 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
изначально это заложено уже в CSS меню. Количество уровней зависит только от количества вложенных списков.
alex
а так менюшка кульная, тока ишак как всегда slideIn криво кажет (
Игорь
Спасибо, первое анимированное меню, которое без бубна стало на вордпресс
Petr
Не подскажете, как выделить первый пункт меню другим цветом? .li first не помогает…
Hiway
Ну если правильно то li:first-child, это если использовать псевдоселектор. А если у первого пункта есть класс first, то li.first
4322
4322
Вот я выше прислал, у меня на сайте так и вышло(
Макс
Доброго дня! Подскажите, как сделать, чтобы подпункты меню выпадали при клике на на основной пункт в меню, а не при наведении на него.
Hiway
В скрипте меню изменить метод события с hover на click
все для мобильных
отлично работает, спасибо 🙂