CSS Menu
Just css and html
Адаптивный список на css. Адаптивная навигация для меню
Хабр, привет!
На С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-Only Dark Menu от Джона Ербанка
Кроме дизайна этот сниппет задает адаптивное выпадающее меню. Панель навигации при стандартном окне занимает обычное горизонтальное положение.
На меньших контрольных точках меню располагается на весь экран. При наведении курсора на основные элементы меню на экран выводятся пункты подменю, имеющие более светлый серый фон. Это решение идеально подойдет для сайтов, на которых не слишком много ссылок на разделы. Таким образом они смогут отображаться на странице, как блок элементов.
Посмотреть демо
Full Responsive Portfolio от Celine
Этот полностью адаптивный макет портфолио включает в себя простую, но эффективную панель навигации. Когда окно просмотра уменьшается до определенной контрольной точки, пункты адаптивного меню для сайта скрываются, на экране остается только кнопка переключения меню. Пользователь может нажать на нее, чтобы развернуть или скрыть меню, которое разворачивается внизу под заголовком.
Посмотреть демо
Bootstrap Navbar от Bobby
Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap .
При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки «прячутся » под переключатель меню. Это распространенный метод работает во всех браузерах.
Посмотреть демо
Clean Dropdown Toggle от Бойда Массье
Эта плоская адаптивная панель навигации с выпадающими меню создана на чистом CSS . В адаптивном состоянии панель навигации превращается в плавающее меню, в котором ссылки выводятся в виде блока. Каждое внутреннее выпадающее меню также может быть переключено, чтобы предоставить доступ к пунктам подменю.
Посмотреть демо
Animated Sliding Bar от Антуана Виниаля
Это выпадающее меню для сайта является одним из самых уникальных примеров навигации. Вы видите светло-зеленую вкладку, при нажатии на которую вверху разворачивается панель навигации со ссылками меню. Каждая ссылка имеет плавающую ширину и подстраивается под любой размер экрана.
На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active .
Посмотреть демо
Basic Responsive Menu от Эша Нельсона
На первый взгляд это меню кажется стандартным: традиционные ссылки, гамбургер-переключатель меню и плоская цветовая гамма. Хотя оно лишено гламурного блеска, меню работает и работает удобно и просто. Весь его код написан на Haml и SASS .
Посмотреть демо
Sliding Drawer Hamburger Nav от Ханьлиня Чонга
Возникновение раздвижных меню для сайтов породило множество споров между дизайнерами и разработчиками. Некоторые считают, что этот способ реализации позволяет поместить в меню много контента, не отнимая полезного пространства. Другие критикуют этот тип меню, так как ссылки скрыты от глаз пользователя.
По этой причине выдвижные меню следует использовать с осторожностью. В первую очередь, когда сайт имеет большое количество элементов навигации. И если вы ищете шаблон подобного типа меню, советую обратить внимание на данный сниппет. Он реализует структуру, с которой знакомы многие пользователи.
Посмотреть демо
Single-Page Mic Nav от Travis
В этом меню ссылки занимают большую часть экрана, а с помощью фоновых шаблонов создается матричный эффект. Это не совсем практично для обычных сайтов, но этот эффект можно использовать для творческих проектов или веб-портфолио.
Посмотреть демо
Morphing Circular Menu от Sergio
Давайте немного поэкспериментируем с этим примером меню для сайта. Взглянув на него, можно подумать, что это обычное выдвижное меню. Но после нажатия на иконку вы увидите уникальный анимированный эффект отображения меню.
Данное решение вряд ли найдет широкое применение в коммерческой сфере. Но все равно это замечательный пример того, какое широкое поле для творчества предоставляет адаптивный дизайн.
Посмотреть демо
Pure CSS Flexbox Nav от Джо Уоткинса
Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3 . Мы уже публиковали , с которым я советую вам ознакомиться.
Это меню построено на Flexbox , в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS , реализована поддержка выпадающих меню для сайта.
Посмотреть демо
Animated Toggle от Джо Баггали
Если вы любите эффекты анимации, то можете воспользоваться этим решением. По умолчанию ссылки выравниваются рядом, поддерживаются выпадающие подменю.
После уменьшения окна просмотра панель навигации скрывается под ссылкой переключения. Меню преобразуется в большой блок, который после выводится на экран с помощью анимации.
Посмотреть демо
Flexible Nav Menu от gantit
Наиболее практичным является использование в адаптивном дизайне нескольких контрольных точек. Вот почему мне нравится эта система навигации. В ней отображено, как стандартная горизонтальная панель навигации может пройти через множество различных фаз. Этот сниппет обеспечивает гибкость в настройке и может органично вписаться в любой сайт.
Посмотреть демо
Pure CSS Tabs от Мартина Гайдичара
Вкладки считаются приемлемым решением для навигации, обеспечивающим перемещение между страницами и внутренним контентом. Когда окно просмотра уменьшается, то они ведут себя как обычный блок навигации с эффектами анимации. Стили дизайна можно легко расширить по своему вкусу.
Посмотреть демо
Pure CSS Breadcrumbs от Оливера Ноблича
«Хлебные крошки » не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS .
Посмотреть демо
Batman Nav от Mighty Shaban
В этом адаптивном меню для сайта ссылки установлены на одностраничный прокручиваемый макет, с их помощью осуществляется перемещение между разделами. При изменении размеров окна просмотра горизонтальное меню преобразуется в вертикальный блок, который скрывается за иконкой.
Система меню красиво скомпонована. Она может пригодиться при разработке любого одностраничного макета.
Посмотреть демо
Multilevel Dropdown от Стефани Уотер
Разработка многоуровневой навигации требует тщательного планирования. Этот сниппет является не только работоспособным, но и поддерживает адаптивные эффекты через CSS . Когда панель навигации уменьшается, пользователь может кликнуть по иконке, расположенной рядом с определенным пунктом меню и отобразить скрытое подменю. Эта техника позволяет поддерживать управляемость кода.
Посмотреть демо
Pure CSS eBook Webapp от Энди Фицсаймона
Интерфейс меню был разработан как имитация стандартного решения iOS с панелями навигации в верхней и нижней частях экрана. В этом сниппете был использован CSS-флексбокс , с помощью которого ссылки многоуровневого меню для сайта и элементы страницы пропорционально изменяют свой размер, чтобы соответствовать размеру окна браузера.
Посмотреть демо
Equal-Width Navigation от Дориана Коврана
Этот интерфейс содержит равные по ширине блоки ссылок панели навигации. Каждая ссылка занимает одинаковый процент экрана по горизонтали до тех пор, пока не будет достигнута определенная малая контрольная точка. После этого панель меню скрывается под иконкой переключателя. Компактный, красивый и функциональный код.
Посмотреть демо
Stylized Multilevel Navbox от Эндрю ДеБрю
В этом сниппете тот же эффект был воспроизведен в сочетании адаптивной функцией. Это меню удивительно гибкое и достаточно уникальное по сравнению с другими примерами адаптивных решений.
Возвращаясь к теме всё возрастающей значимости мобильных устройств, невозможно обойти стороной меню сайта. По бо́льшей части для создания адаптивных меню используются решения на JavaScript, но всегда ли это оправдано? Пожалуй, нет. Ведь его можно сделать на чистом CSS, изменяя видимость элементов при помощи чекбокса.
Не будем долго разглагольствовать о плюсах и минусах данного подхода, а сразу обратимся к конкретному примеру. В данном случае это будет простое одноуровневное меню.
Что делать с многоуровневыми меню? Здесь есть несколько вариантов:
- начать смотреть решения на JavaScript/jQuery
- открывать второй уровень по наведению (что, надо сказать, не является хорошим решением)
Разметка будет чуть более многословной, чем нам это необходимо: здесь содержатся элементы, которые и вовсе могут не пригодиться. Однако, она довольно проста и разобраться в ней совсем несложно.
"initial-scale=1.0, width=device-width" >
Стили
На устройствах с экраном менее 640 пикселей пункты меню скрываются и остаётся только стилизованный через label чекбокс. Если чекбокс отмечен, меню становится видимым. Код для реализации:
/* Menu */ #menu-checkbox { /* чекбокс скрыт */ display : none ; } .main-menu { /* пункты меню скрыты */ display : none ; padding : 0 ; margin : 0 ; } .main-menu li { /* пункты меню расположены вертикально */ /* каждый имеет ширину 100% */ font-size : 1em ; display : block ; width : 100% ; } .main-menu a { /* немного стилизуем ссылки */ display : block ; border-bottom : 1px solid blueviolet ; color : lightslategray ; padding : .5em ; text-decoration : none ; } .main-menu a :hover { text-decoration : underline ; } .toggle-button { text-align : center ; display : block ; /* не забываем явно указать каким должен быть курсор */ cursor : pointer ; background-color : #333 ; color : #fff ; } .toggle-button :after { /* получаем данные из атрибута data-open в html */ content : attr (data-open ); display : block ; margin : 10px 0 ; padding : 10px 30px ; } #menu-checkbox :checked + nav [ role = "navigation" ] .main-menu { /* когда чекбокс активен меню становится видимым */ display : block ; } #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after { content : attr (data-close ); }
С мобильными устройствами разобрались. Осталось внести изменения для тех устройств, экран которых >= 640px. Делать это будем через медиа-запросы.
@media
screen
and
(min-width
:
640px
)
{
.toggle-button
{
/* label скрыт */
display
:
none
;
}
.main-menu
{
display
:
block
;
margin
:
0
auto
;
background-color
:
#333
;
height
:
30px
;
}
.main-menu
li
{
/* теги
Посмотрим, что получилось:
Данный пример можно отыскать .
Стилизация метки
Разумеется, вместо data-open/close можно использовать что угодно. Например, добавить иконочный шрифт.
Toggle-button :after { font-family : "fontello" ; content : "\e804" ; cursor : pointer ; padding : 15px ; font-size : 1.5em ; text-align : center ; } #menu-checkbox :checked + .main-menu .toggle-button :after { content : "\e804" ; }
Или иконку с вместе с поясняющим текстом:
Здесь мы получаем значение атрибутов data-open/close , отображаем данные через before , а саму иконку добавляем с помощью псевдоэлемента after .
Toggle-button :before { content : attr (data-close ); font-size : 1rem ; position : relative ; right : 3px ; bottom : 3px ; } .toggle-button :after { content : "\f0c9" ; font-family : "FontAwesome" ; display : inline-block ; } #menu-checkbox :checked + nav [ role = "navigation" ] .menu { display : block ; } #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after { content : "\f0c9" ; font-family : "FontAwesome" ; color : green ; } #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :before { color : green ; }
В последних двух примерах читателю нужно будет самостоятельно поиграть с позиционированием иконок и расположением самого текста.
Каких-то невероятных эффектов от подобной реализации меню ждать не приходится, хотя не сто́ит забывать о возможностях CSS-анимации.
Привет. Очень давно не писал постов на тему работы html/css. Недавно как раз начал верстать новый макет и в процессе наткнулся на интересный прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока). Итак, сегодня реализуем на css резиновое меню.
Кому лень читать статью, можно посмотреть это видео. Автор также все очень классно объясняет:
Резиновое меню на CSS — шаг 1
Первый шаг — это всегда html разметка, куда же без нее. Но в нашем случае все будет просто:
- блок обертка для меню
- само меню, выведенное через маркированный список (тег ul)
- ну и пункты меню внутри, а в них, соответственно, уже ссылки
Все понятно, вот такой у меня код разметки:
Выглядит это все стандартно, вот так:
Теперь будем приводить все в нужный вид, за работу берется CSS.
Шаг 2 — базовые стили
Шаг 3 — реализуем резиновость
Теперь беремся за само меню. У него (у тега ul) я уберу маркеры, сделаю фоновый , и, самое главное, свойством display: table-row заставлю контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.
R-menu{ background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%); display: table-row; list-style: none; }
Как видите, приведенный код как раз решил все, о чем я писал. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator.
R-menu li{ vertical-align: bottom; display: table-cell; width: auto; text-align: center; height: 50px; border-right: 1px solid #222; }
- vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
- display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
- width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
- text-align: center — это просто для выравнивания текста внутри по центру
- height: 50px — задаем высоту в 50 пикселей
- ну и border-right это просто граница справа, такой разделитель для пунктов
Пока меню выглядит неказисто, но ничего, настало время довести его до ума.
Последнее, что нужно сделать — задать стили ссылкам внутри пунктов. Тут у меня такой код:
R-menu li a{ text-decoration: none; width: 1000px; height: 50px; vertical-align: middle; display: table-cell; color: #fff; font: normal 14px Verdana; }
И вот так теперь выглядит меню:
Опять же, поясню некоторые строки:
- свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
- width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
- vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
- font — ну это просто набор установок для шрифта. Читайте про css свойства для шрифтов в .
Шаг 4 (по желанию) можно добавить интерактивности
Например, чтобы при наведении изменялся цвет пункта меню. Реализуется это совсем просто, с помощью псевдокласса hover:
R-menu li:hover{ background-color: #6bba70; }
Тестируем меню на резиновость
Отлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое, как я вам и обещал. Что ж, добавлю в меню еще 2 пункта:
Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.
Добавлю еще 1 длинный пункт:
Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom , о котором я вам говорил, то меню выглядело бы хуже.
Уменьшу меню до трех пунктов.
Пунктам стало гораздо свободнее, но само меню не поменялось в ширине. Вот мы и сделали 100% резиновое меню!
Как его адаптировать?
В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.
Ну а если вы хотите как-то изменить или поправить меню на мобильных устройствах или широких экранах, то вам в помощь! Успехов в сайтостроении!
Далеко не во всех проектах уместны излишние эффекты, которые могут значительно нагружать страницы, а особенно, если это касается адаптивной верстки, где пользователь может просматривать сайт на смартфонах или планшетах. Большинство таких эффектов, создаются с использованием JavaScript, поэтому, для примера, я решил показать, как можно сделать один из важнейших элементов сайта, а именно меню навигации , практически не прибегая к JS, а в основном только средствами CSS. Совсем нельзя отказаться от использования JS по той причине, что на мобильных устройствах и обычных компьютерах или ноутбуках, многие события отличаются и, если на компьютере в CSS мы можем спокойно использовать свойство :hover , то на планшете это уже не сработает так, как нам бы этого хотелось. Самые нетерпеливые, могут сразу (в примере изменяйте ширину окна браузера ).
Итак, ставим такую задачу: создать резиновое по ширине меню, с переключением на мобильную его версию, где меню будет выпадающим по наведению или нажатию на кнопку. Структура HTML типичная для таких элементов, за исключением того, что мы добавляем еще один элемент - кнопку для раскрытия/скрытия меню в мобильной версии:
CSS не совсем стандартный. Мы сделаем так, что наше меню будет вести себя так, как если бы мы использовали таблицу. Сразу хочу акцентировать внимание на том, что не все браузеры поддерживаю те свойства, которые мы будем использовать. Проблемы могут возникнуть с версиями IE ниже восьмой версии (хотя на них уже пора переставать ориентироваться ) и в пару моментах есть маленькие сложности с IE8, но как решить их - напишу ниже.
* { margin: 0; padding: 0; } header { background-color: #C0C0C0; } #menu { display: table; /* описание ниже */ width: 100%; border-collapse: collapse; -webkit-box-sizing: border-box; /* описание ниже */ -moz-box-sizing: border-box; /* описание ниже */ box-sizing: border-box; /* описание ниже */ } #menu ul { display: table-row; /* описание ниже */ background-color: #FFFFFF; list-style: none; } #menu ul li { display: table-cell; /* описание ниже */ border: 1px solid #999999; } #menu ul li a { display: inline-block; width: 100%; height: 50px; line-height: 50px; font-size: 1.2em; text-align: center; } #menu ul li a:hover { background-color: #990000; color: #FFFFFF; } #nav_button { display: none; width: 50px; height: 50px; font-size: 2.5em; text-align: center; background-color: #FFFFFF; border: 1px solid #949494; cursor: pointer; } @media screen and (max-width: 600px) { /* описание ниже */ #menu { display: inline-block; position: relative; width: auto; } #menu ul { display: none; position: absolute; top: 0; width: 100%; z-index: 20; } #menu ul li { display: list-item; border-top: none; } #nav_button { display: inline-block; } #menu:hover, #menu.open_nav { width: 100%; -webkit-user-select: none; /* описание ниже */ -moz-user-select: none; /* описание ниже */ -webkit-touch-callout: none; /* описание ниже */ } #menu:hover ul, #menu.open_nav ul { display: block; margin-top: 50px; } }
На некоторые стили обращать внимание не нужно; цвет бекграунда, размер шрифта и т.д. - это только для демонстрации. А нас должны интересовать следующие свойства с их значениями:
Display: table; Указывает, что элемент будет себя вести аналогично элементу
| или |
box-sizing: border-box; (и с вендорными префиксами)
При расчетах ширины и высоты элемента, свойства width и height, будут включать в себя значения полей (padding
) и границ (border
). Нужно для того, чтоб избежать появления горизонтальной прокрутки, т.к. без этого свойства, при ширине меню в 100%, добавится еще и толщина border
, а если есть, то и padding
.
-webkit-user-select: none; и -moz-user-select: none;
Запрещает выделять элемент или текст. Нужно для мобильной версии, чтоб избежать неувязок, когда пользователь проводит по элементам меню, вместо того, чтобы нажать на него.
-webkit-touch-callout: none;
Отменяет всплытие подсказки при нажатии и удержании элемента. Работает только в Chrome и Safari. Так же, как и в предыдущем свойстве, служит для отмены нежелательных действий при работе с элементом.
@media (медиа-запрос)
Тема довольно обширная, но если в двух словах, то указывает браузеру, какие свойства применять для определенных типов носителей или технических характеристик устройства. В нашем случае - применять для screen
(экранов мониторов) и max-width: 600px
(если ширина окна браузера меньше 600px).
Самое интересное, что на этом можно было бы поставить точку, если бы мы не учитывали смартфоны, планшеты и с уверенностью сказать, что меню сделано полностью на HTML и CSS. Но придётся прибегнуть к помощи JS/jQuery, а в данном случае, раз уж решено было сделать с наименьшей нагрузкой, именно к чистому JavaScript. Var d = document, navBut = d.getElementById("nav_button"), // кнопка включение меню navMenu = d.getElementById("menu"); // выпадающее меню // функция определения наличия родительского элемента по ID function hasParent(el, sId){ while(el) { if (el.id == sId) return true; el = el.parentNode; } return false; } // по касанию на кнопке, добавляем класс менюшке, // который соответствует свойству в css "#menu:hover" // и разворачиваем меню navBut.addEventListener("touchstart", function(e) { e.preventDefault(); navMenu.classList.add("open_nav"); }, false); // по касанию в документе, // если событие не было на каком-нибудь элементе меню (определяем с помощью функции "hasParent"), // убираем класс "open_nav" из меню, что привод к его закрытию d.addEventListener("touchstart", function(e) { if(!hasParent(e.target, "menu")) navMenu.classList.remove("open_nav"); }, false); Записываем этот код в отдельный js-файл и подключаем его в самом низу страницы, перед закрывающим тегом |
|---|