Red Spirit

Блог Алексея Таянчина

RSS 2.0

Многоуровневое горизонтальное меню на чистом CSS

Хочу описать процесс создания горизонтального многоуровнего меню для сайта, при этом не будет использоваться JavaScript, только чисто CSS.

В чем прикол? Преимущества такого подхода создания меню очевидны – минимальный код, никаких скриптов, потребляет меньше ресурсов браузера (хотя зависит от применяемых эффектов) чем те же распространенные jQuery меню.

Недостатки то есть – недостаточная гибкость, например нельзя сделать эффект плавного вскакивания пунктов меню и анимации, хотя даже тут, если взять в расчет все возможности CSS3 то можно реализовать ту же самую анимацию и плавность. Загвоздка только в том, что не все браузеры в полной мере понимают новый CSS3

css меню

А сейчас я покажу как делается простое меню, без всяких спецэффектов, с простыми стилями. Меню поддерживает три уровня. Сразу даю ссылку на пример:

Смотреть демо CSS меню

Разметка задается с помощью списков, ниже приведен пример разметки из демки:

Как видно, она достаточно простая без лишних атрибутов и классов. Единственно используется только класс dir подменю, он не обязательный и нужен только для того, чтобы поставить маркер (стрелочку) в пункте, который визуально показывает, что у этого пункта есть еще подпункты.

Далее привожу сразу весь CSS:

Обратите внимание, что в селекторах часто используется символ > который нужен для выборка потомка непосредственно от указанного родителя (для подробностей читать доки про css селекторы). Именно благодаря этому можно точно указывать каким элементам какой стиль применить без применения дополнительных классов. Ключевую роль работы меню реализует правило, типа:

.menu > li:hover > ul{display:block;}

Тут указывается, что при наведении курсора на элементы li от класса menu следующему за ним списку ul будет предписаны указанные правила, а именно из невидимого состояния стать видимым  таким образом на экране появляется подменю, и оно скроется если мышь покинет текущий элемент li. Вот как-то так оно работает. Все остальные стили, это, по сути, просто оформление для приятного вида.

Данное меню работает на абсолютном большинстве браузеров, проверено так же на IE7+

Как сделать меню на CSS3 с эффектом анимации

  • Сережка

    а примера нет, что представляет из себя готовое меню?

  • http://redspirit.ru Red Spirit

    ссылка на демо в начале поста http://redspirit.ru/samples/css-menu/

  • Сережка

    А ну чудесно!

  • Pingback: Анимационное многоуровневое меню на CSS3 | Red Spirit

  • Николай

    Спасибо. Отличное решение!

  • Мария

    Спасибо, применили на сайте – http://www.geo-sfera.info/

  • dima

    Test comment discus

  • Olga Shatalova

    Спасибо большое. Очень помогло!

  • JesterLanty

    Спасибо, очень помогли.

  • Александр Н.

    Это меню работает в опере, хроме и мозилле, но не хочет работать в IE 9-й версии. Вроде как должно все поддерживаться, но – нет!
    Я, конечно, понимаю, что все “модные” не пользуются бякой под названием IE9 или даже более старшей версией, а пользуются opera, firefox, chrome, safari и прочими. Но все-таки – вы не могли бы описывать, в каких версиях браузеров работает каждая конкретная разработка на вашем сайте? Это очень удобно и полезно.
    Спасибо!

  • Yamakasi Marshal

    !ie в помощь!