Как сделать меню навигации. Создаем адаптивное навигационное меню
Хабр, привет!
На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
- , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
- Пункт меню
- Пункт меню
- Пункт меню ...
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег
Как сделать горизонтальное меню: разметка и примеры оформления
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. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main { list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; } .menu-main li {display: inline-block;} .menu-main li:after { content: "|"; color: #606060; display: inline-block; vertical-align:top; } .menu-main li:last-child:after {content: none;} .menu-main a { text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; } .menu-main a, .menu-main a:visited {color: #9d999d;} .menu-main a.current, .menu-main a:hover{color: #feb386;} .menu-main a:before, .menu-main a:after { content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; } .menu-main a:hover:before, .menu-main .current:before {left: 0;} .menu-main a:hover:after, .menu-main .current:after {right: 0;} @media (max-width: 550px) { .menu-main {padding-top: 0;} .menu-main li {display: block;} .menu-main li:after {content: none;} .menu-main a { padding: 25px 0 20px; margin: 0 30px; } }2. Адаптивное меню для свадебного сайта
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu { position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; } .top-menu:before, .top-menu:after { content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; } .top-menu:after { border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; } .menu-main { list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; } .menu-main:before, .menu-main:after { content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); } .menu-main:before {left: 15px;} .menu-main:after {right: 15px;} .menu-main li { display: inline-block; padding: 5px 0; } .menu-main a { text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; } .menu-main .current, .menu-main a:hover { border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; } @media (max-width: 500px) { .menu-main li {display: block;} }3. Адаптивное меню с фестонами
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main { list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; } .menu-main:after { content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; } .menu-main li {display: inline-block;} .menu-main a { text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: #777777; transition: .3s linear; position: relative; } .menu-main a:before, .menu-main a:after { content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; } .menu-main a:before {left: 5px;} .menu-main a:after {right: 5px;} .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after {opacity: 1;} .menu-main a.current, .menu-main a:hover {color: #F58262;} @media(max-width:680px) { .menu-main li {display: block;} }4. Адаптивное меню на ленточке
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu { margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); } .top-menu:before, .top-menu:after { content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; } .top-menu:before { top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); } .top-menu:after { bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); } .menu-main { list-style: none; padding: 0; margin: 0; text-align: center; } .menu-main:before, .menu-main:after { content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; } .menu-main:before { left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); } .menu-main:after { right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); } .menu-main li { display: inline-block; margin-right: -4px; } .menu-main a { text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; color: white; transition: .3s linear; } .menu-main a.current, .menu-main a:hover {background: rgba(0,0,0,.2);} @media (max-width: 680px) { .top-menu {margin: 0;} .menu-main li { display: block; margin-right: 0; } .menu-main:before, .menu-main:after {content: none;} .menu-main a {display: block;} }5. Адаптивное меню с логотипом по середине
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu { position: relative; background: rgba(34,34,34,.2); } .menu-main { list-style: none; margin: 0; padding: 0; } .menu-main:after { content: ""; display: table; clear: both; } .left-item {float: left;} .right-item {float: right;} .navbar-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .menu-main a { text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: white; transition: .3s linear; } .menu-main a:hover {background: rgba(0,0,0,.3);} @media (max-width: 830px) { .menu-main { padding-top: 90px; text-align: center; } .navbar-logo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); } .menu-main li { float: none; display: inline-block; } .menu-main a { line-height: normal; padding: 20px 15px; font-size: 16px; } } @media (max-width: 630px) { .menu-main li {display: block;} }6. Адаптивное меню с логотипом слева
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu { background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; } .top-menu:after { content: ""; display: table; clear: both; } .navbar-logo {display: inline-block;} .menu-main { list-style: none; margin: 0; padding: 0; float: right; } .menu-main li {display: inline-block;} .menu-main a { text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; } .menu-main a:before { content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; } .menu-main a:hover:before {opacity: 1;} @media (max-width: 660px) { .menu-main { float: none; padding-top: 20px; } .top-menu { text-align: center; padding: 20px 0 0 0; } .menu-main a {padding: 0 10px;} .menu-main a:before {transform: rotate(45deg) translateX(-6px);} } @media (max-width: 600px) { .menu-main li {display: block;} }Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
- , где в каждом пункте