Горизонтальное меню адаптивное html css

Адаптивное меню на CSS

Возвращаясь к теме всё возрастающей значимости мобильных устройств, невозможно обойти стороной меню сайта. По бо́льшей части для создания адаптивных меню используются решения на JavaScript, но всегда ли это оправдано? Пожалуй, нет. Ведь его можно сделать на чистом CSS, изменяя видимость элементов при помощи чекбокса.

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

Что делать с многоуровневыми меню? Здесь есть несколько вариантов:

• начать смотреть решения на JavaScript/jQuery
• открывать второй уровень по наведению (что, надо сказать, не является хорошим решением)

Разметка будет чуть более многословной, чем нам это необходимо: здесь содержатся элементы, которые и вовсе могут не пригодиться. Однако, она довольно проста и разобраться в ней совсем несложно.

DOCTYPE html> html lang="en"> head> meta charset="utf-8"> meta name="viewport" content="initial-scale=1.0, width=device-width"> title>Pure CSS Menutitle> link rel="stylesheet" href="style.css"> head> body> header> input type="checkbox" id="menu-checkbox" /> nav role="navigation"> label for="menu-checkbox" class="toggle-button" data-open="Menu" data-close="Close" onclick>label> ul class="main-menu"> li>a href="#">homea>li> li>a href="#">abouta>li> li>a href="#">contactsa>li> li>a href="#">projectsa>li> li>a href="#">publicationsa>li> ul> nav> header> article> h1>CSS Menuh1> p>Just css and htmlp> article> body> html>

Дальше постепенно будем разбирать каждый кусочек css-кода по принципу mobile first.

Стили

На устройствах с экраном менее 640 пикселей пункты меню скрываются и остаётся только стилизованный через label чекбокс. Если чекбокс отмечен, меню становится видимым. Код для реализации:

/* Menu */ #menu-checkbox  /* чекбокс скрыт */ position: absolute; clip: rect(1px, 1px, 1px, 1px); > .main-menu  /* пункты меню скрыты */ position: absolute; clip: rect(1px, 1px, 1px, 1px); 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  /* когда чекбокс активен меню становится видимым */ position: static; > #menu-checkbox:checked + nav[role="navigation"] .toggle-button:after  content: attr(data-close); >

С мобильными устройствами разобрались. Осталось внести изменения для тех устройств, экран которых >= 640px. Делать это будем через медиа-запросы.

Стилизация метки

Разумеется, вместо 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"; >

Или иконку с вместе с поясняющим текстом:

label for="menu-checkbox" class="toggle-button" data-open="меню " data-close="меню " onclick >label>

Здесь мы получаем значение атрибутов 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-анимации.

Источник

Делаем многоуровневое горизонтальное меню на CSS + jQuery

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

HTML

CSS

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button < margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >#cssmenu:after, #cssmenu > ul:after < content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; >#cssmenu #menu-button < display: none; >#cssmenu < font-family: Montserrat, sans-serif; background: #333333; >#cssmenu > ul > li < float: left; >#cssmenu.align-center > ul < font-size: 0; text-align: center; >#cssmenu.align-center > ul > li < display: inline-block; float: none; >#cssmenu.align-center ul ul < text-align: left; >#cssmenu.align-right > ul > li < float: right; >#cssmenu > ul > li > a < padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #dddddd; font-weight: 700; text-transform: uppercase; >#cssmenu > ul > li:hover > a < color: #ffffff; >#cssmenu > ul > li.has-sub > a < padding-right: 30px; >#cssmenu > ul > li.has-sub > a:after < position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu > ul > li.has-sub > a:before < position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu > ul > li.has-sub:hover > a:before < top: 23px; height: 0; >#cssmenu ul ul < position: absolute; left: -9999px; >#cssmenu.align-right ul ul < text-align: right; >#cssmenu ul ul li < height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu li:hover > ul < left: auto; >#cssmenu.align-right li:hover > ul < left: auto; right: 0; >#cssmenu li:hover > ul > li < height: 35px; >#cssmenu ul ul ul < margin-left: 100%; top: 0; >#cssmenu.align-right ul ul ul < margin-left: 0; margin-right: 100%; >#cssmenu ul ul li a < border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #dddddd; font-weight: 400; background: #333333; >#cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a < border-bottom: 0; >#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover < color: #ffffff; >#cssmenu ul ul li.has-sub > a:after < position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu.align-right ul ul li.has-sub > a:after < right: auto; left: 11px; >#cssmenu ul ul li.has-sub > a:before < position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu.align-right ul ul li.has-sub > a:before < right: auto; left: 14px; >#cssmenu ul ul > li.has-sub:hover > a:before < top: 17px; height: 0; >@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) < #cssmenu < width: 100%; >#cssmenu ul < width: 100%; display: none; >#cssmenu.align-center > ul < text-align: left; >#cssmenu ul li < width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); >#cssmenu ul ul li, #cssmenu li:hover > ul > li < height: auto; >#cssmenu ul li a, #cssmenu ul ul li a < width: 100%; border-bottom: 0; >#cssmenu > ul > li < float: none; >#cssmenu ul ul li a < padding-left: 25px; >#cssmenu ul ul ul li a < padding-left: 35px; >#cssmenu ul ul li a < color: #dddddd; background: none; >#cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a < color: #ffffff; >#cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul < position: relative; left: 0; width: 100%; margin: 0; text-align: left; >#cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before < display: none; >#cssmenu #menu-button < display: block; padding: 17px; color: #dddddd; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; >#cssmenu #menu-button:after < position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; >#cssmenu #menu-button:before < position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; >#cssmenu #menu-button.menu-opened:after < top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); >#cssmenu #menu-button.menu-opened:before < top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#cssmenu .submenu-button < position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; >#cssmenu .submenu-button.submenu-opened < background: #262626; >#cssmenu ul ul .submenu-button < height: 34px; width: 34px; >#cssmenu .submenu-button:after < position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu ul ul .submenu-button:after < top: 15px; right: 13px; >#cssmenu .submenu-button.submenu-opened:after < background: #ffffff; >#cssmenu .submenu-button:before < position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: '+'; >#cssmenu ul ul .submenu-button:before < top: 12px; right: 16px; >#cssmenu .submenu-button.submenu-opened:before < display: none; >>

jQuery

(function($) < $.fn.menumaker = function(options) < var cssmenu = $(this), settings = $.extend(< title: "Menu", format: "dropdown", sticky: false >, options); return this.each(function() < cssmenu.prepend('
'); $(this).find("#menu-button").on('click', function() < $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) < mainmenu.hide().removeClass('open'); >else < mainmenu.show().addClass('open'); if (settings.format === "dropdown") < mainmenu.find('ul').show(); >> >); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function() < cssmenu.find(".has-sub").prepend('else < $(this).siblings('ul').addClass('open').show(); >>); >; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() < if ($( window ).width() >768) < cssmenu.find('ul').show(); >if ($(window).width() >; resizeFix(); return $(window).on('resize', resizeFix); >); >; >)(jQuery); (function($)< $(document).ready(function()< $("#cssmenu").menumaker(< title: "Menu", format: "multitoggle" >); >); >)(jQuery);

Источник

Подходы к реализации адаптивного меню

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

Введение

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

Все подходы в этой статье используют простой HTML код, который я называю «базовое меню». Атрибут role используется чтобы указать определенный тип: горизонтальное меню (full-horizontal), выпадающий список (select), ниспадающее меню (custom-dropdown) и canvas.

Для стилей я использую один и тот же медиа запрос для всех вариантов:

@media screen and (max-width: 44em)

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

Самый простой подход, потому что вам нужно лишь сделать список элементов шириной во всю страницу:

@media screen and (max-width: 44em) < nav[role="full-horizontal"] < ul >li < width: 100%; >> > 

С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:

Преимущества

Недостатки

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

В данном подходе скрывается базовое меню и показывается выпадающий список вместо него.

Чтобы добиться такого эффекта нам нужно добавить в базовую разметку выпадающий список. Чтобы он работал нам придется добавить JavaScript код, который изменяет значение window.location.href когда происходит событие onchange

На маленьких экранах скрываем базовое меню и показываем выпадающий список. Чтобы помочь пользователю понять, что это меню — мы добавим псевдо-элемент с тектом «Меню»

@media screen and (max-width: 44em) < nav[role="select"] < ul < display: none; >select < display: block; width: 100%; >&:after < position: absolute; content: "Menu"; right: 0; bottom: -1em; >> > 

С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:

Преимущества

Недостатки

• Для работы требуется JavaScript
• Происходит дублирование содержимого
• Выпадающий список не удается стилизовать во всех браузерах

3. Пользовательское ниспадающее меню

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

Проблемы с использованием хака с чекбоксом

Это не оказывало никакого эффекта, потому что хак с чекбоксом использовал псевдокласс :checked с селектором ~ . И пока баг не был исправлен в WebKit 535.1 (Chrome 13) и в актуальном для Android 4.1.2 WebKit 534.30, хак не работал ни на каком устройстве с ОС Android.

Лучшее решение — это использовать анимацию только для WebKit-браузеров для тега

.

Комбинация всех вариантов создает расширенный хак для чекбоксов:

/* Fix for Android */ body < -webkit-animation: bugfix infinite 1s; >@-webkit-keyframes bugfix < from < padding: 0; >to < padding: 0; >> /* default checkbox */ input[type=checkbox] < position: absolute; top: -9999px; left: -9999px; >label

Для больших экранов мы скрываем label:

Для небольших экранов мы скрываем базовое меню и показываем label. Чтобы помочь пользователю понять, чтобы это меню, мы добавим псевдоэлемент с текстом «≡» в label (представим в виде кода «\2261», чтобы использовать как содержимое псевдоэлемента). Когда пользователь кликает на input, базовое меню показывается и список элементов раскрывается во всю ширину.

@media screen and (max-width: 44em) < nav[role="custom-dropdown"] < ul < display: none; height: 100%; >label < position: relative; display: block; width: 100%; >label:after < position: absolute; content: "\2261"; >input:checked ~ ul < display: block; >li < width: 100%; >> > > 

Так меню выглядит на маленьких экранах:

Преимущества

• Не занимает много места в закрытом состоянии
• Целиком стилизуется
• Не требует JavaScript

Недостатки

4. Canvas

В этом подходе, на небольших экранах, скрывается базовое меню и показывается input и label как в варианте 3. Когда пользователь кликает на label, базовое меню выплывает слева и содержимое перемещается вправо. Экран разделяется на части в пропорциях 80% меню и 20% содержимое (в зависимости от разрешения и единиц, используемых в CSS)

На маленьких экранах мы помешаем меню вне содержимого окна и показываем label и input. Чтобы скрыть меню мы устанавливаем для него ширину и отрицательное значение положения. Чтобы помочь пользователю понять, чтобы это меню, мы так же добавим псевдоэлемент с текстом «≡» в label (в виде кода «\2261», чтобы использовать как содержимое псевдоэлемента).

@media screen and (max-width: 44em) < $menu_width: 20em; body < overflow-x: hidden; >nav[role="off-canvas"] < position: absolute; left: -$menu_width; width: $menu_width; ul >li < width: 100%; >> label < display: block; >label:after < position: absolute; content: "\2261"; >input:checked ~ nav[role="off-canvas"] < left: 0; >input:checked ~ .content < margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); >> 

С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:

Преимущества

• Не занимает много места в закрытом состоянии
• Целиком стилизуется
• Не требует JavaScript
• Работает как Facebook / Google+ приложения

Недостатки

• Не семантичный код (input / label)
• Требуется дополнительный HTML
• Абсолютное позиционирование элемента body вызывает ощущение зафиксированного положения

Работает ли это под IE?

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

Источник