Как сделать меню навигации. Создаем адаптивное навигационное меню

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

На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

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

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

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

HTML разметка для горизонтальной навигации

Пункт меню
Пункт меню
Пункт меню

Горизонтальное меню, находящееся внутри тега , можно дополнительно помещать внутрь элемента

...

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

Ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

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

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;} . Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;} , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели . В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

2. Адаптивное меню для свадебного сайта

3. Адаптивное меню с фестонами

4. Адаптивное меню на ленточке

5. Адаптивное меню с логотипом по середине

6. Адаптивное меню с логотипом слева

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка

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

Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
- Home
- About
- Gallery
- News
- Contacts
Изначально, без стилей наша навигация выглядит, как обычный список:

Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
Menu { list-style-type: none; margin: 0; padding: 0; }

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

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

Вертикальное меню

Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.

Блочные ссылки
Прежде всего нужно сделать все теги блочными элементами:
Menu a { display: block; }
Существует несколько причин для этого:

Ширина меню

Следующее, что нам понадобится сделать - это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) - ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента.menu , например:
Menu { width: 300px; }
Вместо этого можно установить ширину для пунктов
либо для ссылок - визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента.menu всё равно останется 100%.

Разделение пунктов

Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a { border-top: 1px solid blue; } .menu { border-bottom: 1px solid blue; }
Высота пунктов и вертикальное выравнивание

Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Menu a { height: 30px; line-height: 30px; } GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

Горизонтальное меню

Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.

Способ первый

Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
Menu li { display: inline; }
При этом теги внутри
нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block . Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a { text-decoration: none; font-family: sans-serif; color: #5757a0; display: inline-block; padding: 10px 20px; background-color: lavender; border-bottom: 5px solid #5757a0; }
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
. Эти промежутки можно убрать, записав HTML-код списка в одной строке:
- Home
- About
- Gallery
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
Menu li { margin-right: -5px; }
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.

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

Способ второй

Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float . Для этого добавьте стиль для тегов
:
Menu li { float: left; }
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu { overflow: hidden; }
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание: если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
19.02.2018 5 076

Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
21.12.2017 10 109

Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
11.09.2016 3 441

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
19.04.2016 6 016

Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
24.12.2015 4 385

Mega dropdown меню - jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
25.06.2014 3 702

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
23.01.2014 2 532

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.
03.01.2014 2 814

Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
03.07.2013 9 399

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css
27.06.2013 2 784

Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the
- elements makes perfect sense:
  
  Example
  
  Home
  
  News
  
  Contact
  
  About
  
  Try it Yourself »
  Now let"s remove the bullets and the margins and padding from the list:
  
  Example explained:
  
  list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
  
  Set margin: 0; and padding: 0; to remove browser default settings
  
  The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
  
  Vertical Navigation Bar
  To build a vertical navigation bar, you can style the elements inside the list, in addition to the code above:
  Example explained:
  
  display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
  
  width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width
  
  You can also set the width of
  - or to center the links.
    
    Add the border property to
    add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all
    elements, except for the last one:
    
    Full-height Fixed Vertical Navbar
    
    Create a full-height, "sticky" side navigation:
    
    Example
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    }
    Try it Yourself »
    Note: This example might not work properly on mobile devices.
    
    Horizontal Navigation Bar
    
    There are two ways to create a horizontal navigation bar. Using inline or floating list items.
    
    Inline List Items
    
    One way to build a horizontal navigation bar is to specify the
    elements as inline, in addition to the "standard" code above:
    
    Example explained:
    
    display: inline; - By default,
    elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
    
    Floating List Items
    
    Another way of creating a horizontal navigation bar is to float the
    elements, and specify a layout for the navigation links:
    
    Example explained:
    
    float: left; - use float to get block elements to slide next to each other
    
    display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
    
    padding: 8px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
    
    background-color: #dddddd; - Add a gray background-color to each a element
    
    Tip: Add the background-color to
    instead of each element if you want a full-width background color:
    
    Horizontal Navigation Bar Examples
    
    Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
    
    Example
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    li {
    float: left;
    }
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    /* Change the link color to #111 (black) on hover */
    li a:hover {
    background-color: #111;
    }
    Try it Yourself »
    Active/Current Navigation Link
    
    Add an "active" class to the current link to let the user know which page he/she is on:
    
    Right-Align Links
    
    Right-align links by floating the list items to the right (float:right;):
    
    Example
    
    Home
    
    News
    
    Contact
    
    About

Печать

Также интересно:

Что такое ММС и как ими пользоваться?

Зачем миникомпьютер нужен именно вам?

Как правильно и безопасно зарядить айфон после покупки?

Рекомендуем почитать:

2024-04-19 10:26:47

С чего начать развитие канала в Telegram

2024-04-18 10:35:20

Календарь: как использовать онлайн-сервис для планирования личного времени

2024-04-18 10:35:20

Почему пропал звук на пк

В продолжение темы:

История

Intel Core i5 на ядре Lynnfield

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