Меню при наведении css. Горизонтальное выпадающее меню. Горизонтальное выпадающее меню на CSS

Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта . В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню , которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!

Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:

  • Главная
  • Статьи
    • HTML
    • CSS
    • PHP
    • MySQL
  • Книги
    • Раскрутка и продвижение
    • Е-Бизнес
    • Web-Дизайн
    • Платежные системы
  • О нас

Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .

На следующем этапе мы приведем наше меню к более красивому виду. Это легко можно сделать благодаря использованию CSS .
Первым делом уберем меркеры в ненумерованном списке, отступы, а также зададим ширину нашего меню.

#nav ul { margin: 0px; padding: 0px; list-style:none; width:200px; }

Теперь нам необходимо задать положение элементов списка. Так как наше меню будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position" , как "relative" . Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю. Также зададим нижнее подчеркивание для пунктов меню.

#nav ul li { position: relative; border-bottom:1px solid #ccc; }

Теперь необходимо подкорректировать наше подменю . Так как мы хотим, чтобы наше меню появлялась справа от основного меню в тот момент, когда над этим пунктом находится курсор, то нам необходимо вложенному списку, свойству "position" задать значение "absolute" . Также нам необходимо задать его положение. Это делается следующим образом

#nav li ul { position: absolute; left: 200px; top: 0; display: none; }

Используя атрибуты left и top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display" значение "none" , так как мы не хотим видеть подменю при открытии страницы.

Итак, теперь наше меню выглядит так.

Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display" значение "block" . Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.

#nav ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; }

#nav li:hover ul { display: block; }

Вот теперь наше меню уже работает и выглядит так .

Осталось придать ему более привлекательный вид.

Для начала давайте сделаем так, чтобы при наведении на пункты нашего меню изменялся фон и цвет текста. Для этого добавим следующий код

#nav li:hover a { color:#FFFFFF; background: url(img/fone-tr.png); }

Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff; ).

#nav li:hover ul a:hover { background-color:#cccccc; background-image:none; color:#FFFFFF; }

Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете посмотреть, что у нас получилось .

На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега - так что li:hover , на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.

Для того чтобы устранить эту проблему, добавим небольшой JavaScript-код:

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

jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i li:hover{ background-color: #f96; } .menu ul ul > li:hover{ background-color: #69e; } .menu ul li, .menu ul{ display: inline-block; } .menu ul{ position: relative; margin: 0; padding: 0; background-color: #f63; } .menu ul ul{ display: none; position: absolute; background-color: #369; margin-top: 10px; margin-left: -10px; } .menu ul a{ color: #fff; text-decoration: none; } .menu ul ul a{ color: #fff; text-decoration: none; } .menu li:hover ul{ display: block; } .menu li:hover li{ display: block; }

Созданное меню не является идеальным и может быть улучшено (подумайте, как именно). Удачной вам разработки и пусть создание подобных меню никогда не вызовет сложности!

Осуществим нашу задумку с помощью самого обычного CSS . В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery . Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:

Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.

  • пункт 1
    • Выпадающий пункт 1
    • Выпадающий пункт 2
    • Выпадающий пункт 3
  • пункт 2
    • Выпадающий пункт 1
    • Выпадающий пункт 2
    • Выпадающий пункт 3

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂

#slow_nav > ul{ width: 500px; margin:25px auto 0; } #slow_nav > ul > li{ list-style: none; display: inline-block; position:relative; padding:0; } #slow_nav a{text-decoration:none;} #slow_nav > ul > li > a{ font-size:18px; padding:5px; background-color:#333; color:#fff; } #slow_nav li ul{ position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; /* Данные строки нужны для правильной работы анимации */ max-height:0px; overflow:hidden; -webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; /* конец */ } #slow_nav li:hover ul{ max-height:300px; } #slow_nav li ul li{ background-color:#333; border-bottom:1px solid #888; } #slow_nav li ul li:last-child{ border-bottom:none; } #slow_nav li ul li a{ padding:5px 12px; color:#fff; display:block; } #slow_nav li ul li:hover{ background-color:#444; } #slow_nav li ul li:first-child{ margin-top:25px; position:relative; } #slow_nav li ul li:first-child:before{ content:""; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; }

Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.

Первым делом это сама анимация. Нужный код выделен комментариев в коде - /* Данные строки нужны для правильной работы анимации */ . Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей -

max-height:0px; и прописываем свойство overflow:hidden; , чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition , которое совершит анимацию.

Webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;

Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство, для задания новой высоты при наведении на главные пункты меню:

#slow_nav li:hover ul{ max-height:300px; }

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

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress . Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.

В уроке задействуем:

  • display: flex;
  • используем transition ;
  • будем позиционировать элементы при помощи position .
HTML структура горизонтального меню

П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .

Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu ».

Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#" . Затем будет идти иконка I с классом .fa .fa-

ul>li*5>a>i.fa.fa-

Жмем применить.

Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты ).

Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome , отберем себе иконки под данные пункты меню:

Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.

В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .

В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home , shopping-cart , cogs , th-list , envelope-open ).

Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .

Body{ background-image: url("../img/ep_naturalwhite.png"); }

Описываем CSS стили горизонтального меню

Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:

Dws-menu *{ margin: 0; padding: 0; }

Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Скроем маркеры у списков:

Dws-menu ul, .dws-menu ol{ list-style: none; }

Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:

Dws-menu > ul{ display: flex; justify-content: center; }

В header сделаем отступ только сверху, пропишем margin-top .

Header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }

Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

Dws-menu > ul li{ position: relative; }

Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }

Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.

Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }

Делаем разделители спискам LI :

.dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }

Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.

Анимируем горизонтальное меню при наведение

Dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }

Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.

Описываем выпадающее меню CSS / HTML

О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .

ul>li*5>a

Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия ).

  • Одежда
  • Электроника
  • Продукты питания
  • Инструменты
  • Быт. химия

Затем открываем style.css и опишем стили подменю.

Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.

/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }

Пропишем спискам border в 1 пик.

Dws-menu li > ul li{ border: 1px solid #c7c8ca; }

Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .

Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }

Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны ) и сохраняемся.

  • Электроника
    • Камеры
    • Компьютеры
    • Телефоны

    • Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

    Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }

    /*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }

    А для их появления отберем списки при наведении и отобразим их при помощи display: block; .

    Dws-menu li:hover > ul{ display: block; }

    Теперь можно добавлять многоуровневые меню просто простым копированием блока UL , изменением его пунктов.

    • Главная
    • Продукция
      • Одежда
        • Обувь
        • Куртки
        • Брюки
      • Электроника
        • Камеры
        • Компьютеры
        • Телефоны
          • Samsung
          • Flf
          • Apple
      • Продукты питания
      • Инструменты
      • Быт. химия
    • Услуги
      • Услуга 1
      • Услуга 2
      • Услуга 3
    • Новости
    • Контакты

    Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

    .dws-menu > ul li a{ display: block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; } .dws-menu li a:hover{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: #e0e1e5; /* Old browsers */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

    При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.

    Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в .

    Как сделать горизонтальное выпадающее меню 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

    HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка

  • добавляется вложенный список