Выпадающее меню 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
Постовой:
Все нам полезно будет знать, что Максим.ру — это не блог певицы, это намного круче...
Для фрилансера кресло — это неотъемлемая важная часть рабочего места — кресло-мешок может попробовать поэкспериментировать?
Loading ...
Спасибо!
Спаибо! Красавчег
Не работает в 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, но тут эффекты прикольные, думаю возьму этот.
Спасибо!! одно вот только не пойму, как сделать чтобы открывалось не вправо, а влево
Глючной, сырой скрипт.
Быстро потузаить курсором в районе меню потом оставить курсор в области меню (в выпадающем сегменте), и она начинает дрочится: выпадать и прятаться.
Подобные косяки делаю неприемлемым использования скрипта на нормальных сайтах. А для говносайта нормально
спасибо вы супер
Меню простое и удобное.
Проблема следующая: у меня фоновый цвет меню (черный) и выпадающих блоков (серый) разный. При наведении на раздел его цвет совпадает с цветом выпадающего блока, то есть серым. Но когда курсор переводится на выпадающий блок, то цвет раздела становится изначальным. Получается выпавший блок серый, а цвет раздела возвращается к черному. Как сделать чтобы при перемещении курсора по выпадающему блоку цвет раздела вверху был таким же? (объяснил как мог)
как однако сделать ее бесконечно многоуровневой ?
изначально это заложено уже в CSS меню. Количество уровней зависит только от количества вложенных списков.
а так менюшка кульная, тока ишак как всегда slideIn криво кажет (
Спасибо, первое анимированное меню, которое без бубна стало на вордпресс
Не подскажете, как выделить первый пункт меню другим цветом? .li first не помогает...
Ну если правильно то li:first-child, это если использовать псевдоселектор. А если у первого пункта есть класс first, то li.first