Создаем выпадающее меню в css. Как создать в CSS выпадающее меню? Многоуровневое выпадающее меню со всплывающей випадашкой при наведении

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

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

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

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

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

      Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
      — для элемента списка, в который вложен выпадающий список: li {position: relative;} ;
      — для выпадающего меню ul {position: absolute;} , а также значения left и top .

      Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

      Скрыть выпадающее меню можно несколькими способами:
      1) display: none;
      2) visibility: hidden;
      3) opacity: 0;
      4) transform: scaleY(0);
      5) с помощью библиотеки jQuery.

      Способ 1. {display: none;}

      Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .

      Способ 2. {visibility: hidden;}

      Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .

      Способ 3. {opacity: 0;}

      Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

      Способ 4. {transform: scaleY(0);}

      Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.

      Способ 5. С помощью jQuery $(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has(".submenu")").hover(function(){ $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом.submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */); 2. 3D выпадающее меню

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

      * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "\f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; }

      3. Разворачивающееся выпадающее меню с логотипом

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

      Лого

      * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: ""; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: "Open Sans", sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }

      4. Увеличивающееся выпадающее меню

      Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .

      * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }

      5. Подъезжающее выпадающее меню

      Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

      @import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } body:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); } nav { text-align: center; padding: 40px 0 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; display: block; color: #222; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { position: relative; padding: 10px 15px; font-family: "Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; } .topmenu > li > a:before { content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; } .topmenu li:hover a:before { transform: translate(-50%, 0); opacity: 1; } .submenu { position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .submenu a { font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; } .submenu a:hover {background: #e8e8e8;}

      Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.

      Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .

      В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.

      Навигация по странице:

      И так, наша задача:

      сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц

      в коде.

      Выпадающее горизонтальное меню html

      Первым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.

      В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:

      • Главная
      • О нас
      • Наши услуги
        • Наша услуга №1
        • Наша услуга №2
        • Наша услуга №3
        • Наша услуга №4
        • Услуга 5
      • Новости
      • Контакты

      Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:

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

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

      Стили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса:hover.

      Для горизонтального выпадающего меню нам потребуются вот такие стили:

      #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul::after{ display:block; width:100%; height:0px; clear:both; content:" "; } #menu1 ul li{ position:relative; display:block; float:left; width:auto; height:auto; } #menu1 ul li a{ display:block; padding:9px 25px 0px 25px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; }

      Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:

      #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ float:none; width:100%; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 25px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }

      Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

      Смотрите скин с этим меню:

      Рис. 2 (горизонтальное выпадающее меню)

      Ниже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне 🙂 или колесико мышки)

      Горизонтальное выпадающее меню на всю ширину

      Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

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

      #conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li a{ display:block; padding:9px 35px 0px 35px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 ul li:last-child ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 35px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }

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

      Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство "white-space:nowrap;" у селектора #menu1 ul li ul, и удалить его.

      Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

      Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

      Горизонтальное выпадающее меню с разделителями

      Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют::before или::after , или куда проще border-left, border-right я дублировать не буду.

      Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

      Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:

      Сразу после .

      Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:

      $(document).ready(function(){ $("#menu1 > ul > li:not(:last-child)").after(" "); });

      Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

      #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; }

      Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:

      Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

      Преимуществами такого решения является:

      • меню будет тянутся динамически;
      • отступы от разделителя до пункта везде одинаковые;
      • более красивое и гибкое оформление.
      Горизонтальное многоуровневое выпадающее меню CSS+HTML

      Раз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:

    • с випадашкой при наведении в сторону
    • со всплывающей выпадашкой третьего уровня

      • В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.

      Многоуровневое выпадающее меню с випадашкой в сторону при наведении

      Для начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:

      • Главная
      • О нас
      • Наши услуги
        • Наша услуга №1
          • Дополнение к услуге 1
          • Дополнение к услуге 2
        • Наша услуга №2
          • Дополнение к услуге 3
          • Дополнение к услуге 4
        • Наша услуга №3
        • Наша услуга №4
        • Услуга 5
      • Новости
      • Контакты
        • Карта проезда
          • Дополнение для карты
          • Дополнение для карты 2
        • Форма обратной связи

      #conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 > ul > li:last-child > ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; } #menu1 > ul > li:last-child > ul ul{left:auto; right:100%;} #menu1 ul li ul li ul a{color:#F38A01;}

      Файлы для jQuery копируем как были с предыдущего примера. Решил оставить разделители, что б меню хоть немного лучше смотрелось. Можно конечно и без них.

      Вот так получилось:
      Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.

      Ниже вы можете посмотреть демо а также скачать пример:

      Многоуровневое выпадающее меню со всплывающей випадашкой при наведении

      Немного масло масляное получилось в заголовке, но прокатит, главное код.

      Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.

      Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.

      Будет меняться только CSS полностью:

      #conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 > ul > li{position:static;} #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; } #menu1 > ul > li > ul::after{ clear:both; float:none; width:100%; height:0px; content:" "; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:30%; float:left; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; z-index:15; } #menu1 ul li ul li ul li{display:block; float:none; width:100%;} #menu1 ul li ul li ul a{ color:#F38A01; border-top:1px solid #ffffff; }

      Вот так меню будет смотреться:Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через:nth-child но я не стал городить огород.

      Смотрите демо горизонтального многоуровневого выпадающего меню:

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

      На этом у меня все, надеюсь хоть один мой пример вам подошел. Спасибо за внимание.

      это принесет пользу и им и мне 🙂 .

      Если вы прочли пост полностью, но не нашли как сделать свое горизонтальное выпадающее меню на css, задайте вопрос в комментариях или воспользуйтесь поиском по сайту.

      Также, советую посетить родительскую страницу https://сайт/vypadayushhee-menu/ , там собраны все примеры и разновидности выпадающих меню.

      Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка , а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто хочет изменить навигацию на своем сайте.

      Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.

      Шаг1 — HTML разметка

      Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.

      • My dashboard
      • Likes
      • Views
        • Documents
        • Messages
        • Sign Out
      • Uploads
      • Videos
      • Documents

      • My dashboard
      • Likes
      • Views
        • Documents
        • Messages
        • Sign Out
      • Uploads
      • Videos
      • Documents

      Шаг2 — отображение меню

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

      .menu, .menu ul, .menu li, .menu a { margin : 0 ; padding : 0 ; border : none ; outline : none ; } .menu { height : 40px ; width : 505px ; background : #4c4e5a ; background : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -o-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; } .menu li { position : relative ; list-style : none ; float : left ; display : block ; height : 40px ; }

      Menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }

      Шаг3 — оформление ссылок

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

      .menu li a { display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font-family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition : color .2s ease-in-out; } .menu li: first-child a { border-left : none ; } .menu li: last-child a{ border-right : none ; } .menu li: hover > a { color : #8fde62 ; }

      Menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; }

      Шаг4 — подменю

      Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.

      .menu ul { position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border-radius : 0 0 5px 5px ; -webkit-transition: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacity .25s ease .1s ; } .menu li: hover > ul { opacity : 1 ; } .menu ul li { height : 0 ; overflow : hidden ; padding : 0 ; -webkit-transition: height .25s ease .1s ; -moz-transition: height .25s ease .1s ; -o-transition: height .25s ease .1s ; -ms-transition: height .25s ease .1s ; transition : height .25s ease .1s ; } .menu li: hover > ul li { height : 36px ; overflow : visible ; padding : 0 ; }

      Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

      Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).

      .menu ul li a { width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; } .menu ul li: last-child a { border : none ; } .menu a.documents { background : url (../img/docs.png ) no-repeat 6px center ; } .menu a.messages { background : url (../img/bubble.png ) no-repeat 6px center ; } .menu a.signout { background : url (../img/arrow.png ) no-repeat 6px center ; }

      Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; } .menu ul li:last-child a { border: none; } .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; } .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; } .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

      Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:

      Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:

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

      HTML код

      Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:

      • settings — ссылка картинка;
      • search — блок с поиском и соответствующей кнопкой;
      • options — содержит подменю (реализовано через список с классом subnav).

      Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:

      • Application
      • Board
      • Options
        • Settings
        • Application
        • Board
        • Options

      • Application
      • Board
      • Options
        • Settings
        • Application
        • Board
        • Options

      CSS для меню

      1. Базовые стили и элементы меню

      Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;

      @import url (http: //fonts.googleapis .com/css?family= Montserrat) ; * { margin : 0 ; padding : 0 ; } .nav { background : #232323 ; height : 60px ; display : inline-block ; } .nav li { float : left ; list-style-type : none ; position : relative ; }

      @import url(http://fonts.googleapis.com/css?family=Montserrat); * { margin: 0; padding: 0; } .nav { background: #232323; height: 60px; display: inline-block; } .nav li { float: left; list-style-type: none; position: relative; }

      2. Оформление ссылок

      Для пунктов меню применяется базовое оформление + . Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.

      .nav li a { font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat, sans-serif ; text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; } .nav li a: hover { background-color : #2e2e2e ; } #settings a { padding : 18px ; height : 24px ; font-size : 10px ; line-height : 24px ; }

      Nav li a { font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .nav li a:hover { background-color: #2e2e2e; } #settings a { padding: 18px; height: 24px; font-size: 10px; line-height: 24px; }

      3. Блок поиска

      Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.

      #search { width : 357px ; margin : 4px ; } #search_text { width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; transition : all 0.15s ; } :: -webkit-input-placeholder { /* WebKit browsers */ color : white ; } : -moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : white ; } :: -moz-placeholder { /* Mozilla Firefox 19+ */ color : white ; } : -ms-input-placeholder { /* Internet Explorer 10+ */ color : white ; } #search_text : focus { background : rgb (64 , 151 , 119 ) ; } #search_button { border : 0 none ; background : #1f7f5c url (search.png ) center no-repeat ; width : 60px ; float : left ; padding : 0 ; text-align : center ; height : 52px ; cursor : pointer ; }

      #search { width: 357px; margin: 4px; } #search_text{ width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; } #search_text:focus { background: rgb(64, 151, 119); } #search_button { border: 0 none; background: #1f7f5c url(search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; }

      4. Выпадающее подменю

      Финальный штрих позволит нам как сделать выпадающее меню на CSS, которое срабатывает для последнего пункта #options.

      #options a{ border-left : 0 none ; } #options > a { background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; } .subnav { visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; background : #232323 ; } .subnav li { float : none ; } .subnav li a { border-bottom : 1px solid #2e2e2e ; } #options : hover .subnav { visibility : visible ; top : 100% ; opacity : 1 ; }

      #options a{ border-left: 0 none; } #options>a { background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; } .subnav { visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; } .subnav li { float: none; } .subnav li a { border-bottom: 1px solid #2e2e2e; } #options:hover .subnav { visibility: visible; top: 100%; opacity: 1; }

      В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:

      В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса:only-child для пунктов добавляется символ «+» обозначающих наличие подменю.

      В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:

      Итого

      Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для , хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.

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

      Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.

      В этом уроке мы сделаем, классическое горизонтальное меню на чистом 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.

      Осуществим нашу задумку с помощью самого обычного 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 на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

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



    © Copyright 2024, https://qzoreteam.ru