Опубликовано автор в категориях Верстальщику.

Сегодня 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

Постовой:

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

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

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

43 комментария к записи “Выпадающее меню XHTML+CSS+jQuery”

    • Hiway

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

      Ответить
  1. sweedbes

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

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

    Ответить
  2. Серый

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

    Ответить
  3. Серый

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

    Ответить
  4. Hiway

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

    Ответить
  5. hAhol

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

    Ответить
  6. Эльдар

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

    Ответить
  7. puper

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

    Ответить
  8. Riverain

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

    Ответить
  9. 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

        Вписал туда ) не помогает.
        Где-то скриптом под-менюшке присваивается доп. свойства.

        Ответить
  10. vvmure

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

    Ответить
  11. chetnik

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

    Ответить
  12. Андрей

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

    Ответить
  13. Philip

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

    Ответить
  14. Максим

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

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

    Ответить
  15. Сергей

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

    Ответить
    • Hiway

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

      Ответить
  16. Игорь

    Спасибо, первое анимированное меню, которое без бубна стало на вордпресс

    Ответить
    • Hiway

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

      Ответить
  17. Макс

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

    Ответить

Оставить комментарий

  • (не будет показан)