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

Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать.

Принцип работы

Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы:

Наведи на меня курсор >
я - скрытая часть

и применим к этому коду такие стили:

Example_shown { display:inline-block; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:inline-block; }

В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент.example_shown у дочернего элемента.example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню.

Создание выпадающего меню

Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li

Как видно из кода, основной список с id = «menu» у нас будет отвечать за видимые разделы меню. В разделы мы вкладываем ещё один список ul, содержащий в себе выпадающие ссылки при наведении на заголовок раздела меню. Теперь применим к этому набору элементов следующие стили:

/*Обнуляем отступы*/ ul, li { margin:0; padding:0; list-style-type:none; } /*Задаём параметры блока, содержащего основное меню*/ #menu { display:block; position:absolute; top:100px; left:50px; } /*Задаём стили для разделов нашего меню*/ #menu > li { display:inline-block; height:20px; position:relative; } /*Стили для скрытого выпадающего меню*/ #menu > li > ul { position:absolute; top:20px; display:none; } /*Делаем скрытую часть видимой*/ #menu > li:hover > ul { display:block; }

В данных стилях я хочу акцентировать внимание на четырёх вещах:

  1. Обратите внимание на этот символ #menu > li в стилях. Он обозначает, что стили будут применяться не ко всем элементам li, расположенным внутри ul#menu, а только к тем, кто является непосредственным потомком тега ul#menu.
  2. У разделов меню позиционирование изменено на position:relative. Дело в том, что обычный тег с position:absolute ведёт отсчёт координат позиционирования от левого верхнего угла окна браузера. Но если такой тег вложить внутрь тега с position:relative, отсчёт будет вестись от угла этого тега.
    Таким образом, мы сможем привязать выпадающие списки не к какой-то координате относительно окна, а к координате относительно раздела основного меню. Собственно top:20px и задаёт смещение по вертикали от верхней границы главного раздела.
  3. Параметр top у #menu > li > ul должен равняться сумме параметров #menu > li таких как height + padding-top + padding-bottom. В данном случае последние два параметра не указаны, их значение наследуется из самого первого стиля и равно нулю. Значение height = 20. Значит отступ у нашего выпадающего списка будет равен 20 + 0 + 0 = 20px
  4. Когда мы переведём курсор на пункты выпавшего списка (#menu > li > ul > li), каждый элемент li этого списка будет попадать под событие наведения курсора hover. При этом он является вложенным в список ul, который в свою очередь вложен в #menu > li. Событие hover при этом будет передаваться от #menu > li > ul > li всем родительским элементам, в том числе и #menu > li. Из-за этого список не будет схлопываться обратно несмотря на то, что мы не держим курсор непосредственно над #menu > li.

    5. Заключение

    Выпадающие списки — довольно удобный способ разместить большое меню на маленьком пространстве. Но у этого способа есть колоссальный минус: он не будет работать на мобильных устройствах. Почему? Потому что у них в принципе нет понятия наведения курсора. У них есть клики, перетягивания. Но наведения курсора нет. Так что не забудьте об этих пользователях и сделайте для них отдельную реализацию меню.

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

    и
  • .

    Как оговаривалось в предыдущих публикациях, парный элемент

      создает маркированный список, а
    • — один элемент списка. Для наглядности давайте напишем код простого меню:

      Навигация

      Навигация сайта

      • Главная
      • Новости недели
      • Технологические достижения
      • Чат

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

      Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

      Создадим-ка горизонтальную навигационную модель

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

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

      Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

      • -ms- (Internet Explorer)
      • -o- (Opera)
      • -webkit- (Chrome, Safari)
      • -moz- (Firefox)

      А теперь полученные знания применим к написанию примера.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Горизонтальная панель
    • Главная
    • О компании
    • Продукция
    • Контакты
      •

      Горизонтальная панель

    • Главная
    • О компании
    • Продукция
    • Контакты
      •

      А теперь вертикально. Я сказал вертикально!

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

      Для этого я воспользовался еще одним свойством css border-radius .

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

      Вертикальная панель

    • Главная
    • О компании
    • Продукция
    • Контакты
      •

      Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

      Подпункты в меню: выпадающий список

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

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

      Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Выпадающий список
      • Главная
      • Продукция
        • Конфеты
        • Торты
        • Печенье
      • Контакты

      Выпадающий список

      • Главная
      • Продукция
        • Конфеты
        • Торты
        • Печенье
      • Контакты

      Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

      Структура статьи

      Горизонтальное меню по центру без выпадающих пунктов

      Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.

      Html-код

      Css-код

      *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 } #mainmenu ul { list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px } #mainmenu ul li { position: relative; left: -50%; float: left; margin: 0 10px; height: 40px } #mainmenu ul li a { color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; } #mainmenu ul li a:hover { background-color: #666; }

      Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

      Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden» , иначе мы получим горизонтальную полосу прокрутки.

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

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

      Теперь разберем с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

      Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».

      Html-код

      CSS-код

      *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 } #mainmenu ul { clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 } /** Основные пункты **/ #mainmenu > ul > li { position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

      Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.

      Выравнивание меню по центру с помощью flexbox

      Выровнять меню по центру можно также, применив новое правило в css - flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

      Код CSS

      *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 } #mainmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /** Основные пункты **/ #mainmenu > ul > li { position: relative; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

      Как видим, изменились правила только для родительского списка - #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть

      Хабр, привет!

      На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.

      Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

      Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

      В этом обзоре мы рассмотрим многоуровневые меню.

      Flat Horizontal Navigation

      Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
      http://codepen.io/andytran/pen/kmAEy

      Material Nav Header w/ Aligned Dropdowns

      Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
      http://codepen.io/colewaldrip/pen/KpRwgQ

      Smooth Accordion Dropdown Menu

      Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
      http://codepen.io/fainder/pen/AydHJ

      Pure CSS Dark Inline Navigation Menu

      Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
      http://codepen.io/3lv3n_snip3r/pen/XbddOO

      Pure CSS3 Mega Dropdown Menu With Animation

      Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
      Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
      Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

      CSS3 Dropdown Menu

      Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
      http://codepen.io/ojbravo/pen/tIacg

      Simple Pure CSS Dropdown Menu

      Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
      http://codepen.io/Responsive/pen/raNrEW

      Bootstrap 3 mega-dropdown menu

      Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
      http://codepen.io/organizedchaos/full/rwlhd/

      Flat Navigation

      Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
      http://codepen.io/andytran/pen/YPvQQN

      3D nested navigation

      Горизонтальное меню с очень крутой анимацией без js!
      http://codepen.io/devilishalchemist/pen/wBGVor

      Responsive Mega Menu - Navigation

      Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
      http://codepen.io/samiralley/pen/xvFdc

      Pure Css3 Menu

      Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
      http://codepen.io/Sonick/pen/xJagi

      Full CSS3 Dropdown Menu

      Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
      http://codepen.io/daniesy/pen/pfxFi

      Css3 only dropdown menu

      Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
      http://codepen.io/riogrande/pen/ahBrb

      Dropdown Menus

      Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
      http://codepen.io/kkrueger/pen/qfoLa

      Pure CSS DropDown Menu

      Примитивное, но эффективное решение. Только css и html.
      http://codepen.io/andornagy/pen/xhiJH

      Pull Menu - Menu Interaction Concept

      Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
      http://codepen.io/fbrz/pen/bNdMwZ

      Make Simple Dropdown Menu

      Чистый и простой код, без js. В ie8 точно работать будет.
      http://codepen.io/nyekrip/pen/pJoYgb

      Pure CSS dropdown

      Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
      http://codepen.io/jonathlee/pen/mJMzgR

      Dropdown Menu

      Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
      http://codepen.io/MeredithU/pen/GAinq

      CSS 3 Dropdown Menu

      Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
      http://codepen.io/ibeeback/pen/qdEZjR

      Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
      http://codepen.io/martinridgway/pen/KVdKQJ

      CSS3 Menu Dropdowns (особенное решение)!

      Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
      http://codepen.io/cmcg/pen/ofFiz

      П.С.
      Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
      Всем приятной работы.

Похожие публикации