Css вертикальное меню адаптивное. Большой обзор красивых многоуровневых меню с codepen

/* меню */ .nav { margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 3px; }

За изменения цвета ссылок и фона активных/текущих пунктов меню отвечают секции.nav a:hover и.nav .current a соответственно. Я не стал особо мудрить в этом примере, всё сделал в духе минимализма, при наведении на ссылку меняется цвет, текст становится черным color: #000; , а для активных пунктов добавил фон background: #999; , заменил цвет шрифта на белый color: #fff; и чуточку закруглил края border-radius: 3px; у получившейся кнопки. Вы же можете фантазировать и экспериментировать в этом плане, сколь душе угодно.

Как я уже упоминал выше, мы можем изменять выравнивание пунктов навигации с помощью свойства text-align , для этого добавим в код CSS несколько строк:

/* меню справа */ .nav.right ul { text-align: right; } /* меню по центру */ .nav.center ul { text-align: center; }

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

Будем исправлять ситуацию с помощью медиа запросов. В точке приложения медиа запроса в 600px, выставил относительное позиционирование position: relative; для элемента nav , чтобы мы смогли потом разместить список меню

сверху в абсолютной позиции position: absolute; . С помощью свойства display: none скроем все пункты меню li , оставив только активные на текущий момент ссылки с классом current , прописав им свойство display: block
При наведении на сгруппированную панель навигации все пункты меню должны показываться в виде выпадающего списка, для этого определяем правило.nav ul:hover li с функцией code>display: block . Для активных/текущих пунктов добавляем иконку, чтобы выделить из из остальных.
Если необходимо сместить меню вправо или расположить по центру, воспользуйтесь left и right свойствами позиционирования для списка ul нашего меню.


@media screen and (max-width : 600px ) { .nav { position : relative ; min-height : 40px ; } .nav ul { width : 180px ; padding : 5px 0 ; position : absolute ; top : 0 ; left : 0 ; border : solid 1px #aaa ; background : #FAFAFA url (images/icon-menu.png ) no-repeat 10px 11px ; border-radius : 5px ; box-shadow : 0 1px 2px rgba (0 , 0 , 0 , .3) ; } .nav li { display : none ; /* скрыть все пункты */ margin : 0 ; } .nav .current { display : block ; /* показывать только текущие активные пункты */ } .nav a { display : block ; padding : 5px 5px 5px 32px ; text-align : left ; } .nav .current a { background : none ; color : #666 ; } /* при наведении на пункты меню */ .nav ul: hover { background-image : none ; } .nav ul: hover li { display : block ; margin : 0 0 5px ; } .nav ul: hover .current { background : url (images/icon-check.png ) no-repeat 10px 7px ; } /* адаптивное меню справа */ .nav .right ul { left : auto ; right : 0 ; } /* адаптивное меню по центру */ .nav .center ul { left : 50% ; margin-left : -90px ; } }

@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* скрыть все

• пункты */ margin: 0; } .nav .current { display: block; /* показывать только текущие активные
• пункты */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* при наведении на пункты меню */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* адаптивное меню справа */ .nav.right ul { left: auto; right: 0; } /* адаптивное меню по центру */ .nav.center ul { left: 50%; margin-left: -90px; } }

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

  Урок подготовлен по материалам
  Вольный перевод и адаптация: Андрей /driver/

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

  flexMenuЭто именно то меню, которое было так тяжело найти и функционал которого мы уже собирались начать писать.
  flexMenu - меню , которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность - это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится меню с фиксированной высотой и «играющей» шириной.
  При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями.Code a Responsive Navigation MenuОтличный пример меню навигации . При ресайзе окна браузера мы увидим, что пункты переходят друг под друга и выравниваются по ширине. Смотрится очень аккуратно. Самое главное, данное адаптивное меню будет отлично смотреться на мобильных устройствах и, что более преимущественно, оно удобно в использовании на девайсах с тач дисплеем.

  

  Multi-level Flat Menu - адаптивная навигацияMulti-level Flat Menu - это адаптивное, многоуровневое меню , работающее с помощью библиотек Jquery. На десктопных мониторах мы видим обычное, привычное нам горизонтальное меню. На мобильных устройствах горизонтальная навигация трансформируется в выпадающий список.
  Multi-level Flat Menu - отличный выбор, если вам требуется сэкономить место на странице.

  

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

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

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

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

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

  Pure CSS Menu

  • home
  • about
  • contacts
  • projects
  • publications
  CSS Menu

  Just css and html

  Стили

  На устройствах с экраном менее 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 { /* теги

• расположены в ряд */ width : calc (100% / 5 ); text-align : center ; display : inline-block ; margin-right : -4px ; } .main-menu a { display : inline-block ; margin-right : -4px ; font-size : .8em ; background-color : #333 ; text-decoration : none ; color : #fff ; text-transform : capitalize ; border-bottom : 0 ; } }

  Посмотрим, что получилось:

  Данный пример можно отыскать .

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

  Разумеется, вместо 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-анимации.

  Сегодня мы поговорим о том, как создать адаптивное меню, используя только CSS3. Почему именно адаптивное? Мне кажется, это очень важно и должно стать нормой, ведь уже сегодня огромное число людей заходят в интернет через мобильные девайсы (ipad-ы, iphone-ы...). Этим пользователям необходимо дать возможность удобной навигации по вашему сайту. Для решения данной задачи можно воспользоваться jQuery или JavaScript-ом, но сегодня мы рассмотрим нечто иное.

  По сути, у нас будет обычное выпадающее меню, основанное на списке UL > LI. Если же мы уменьшим экран, то все подменю будут доступны по клику. Давайте посмотрим, что у нас должно получиться:

  

  Шаг 1. HTML

  Вот и html код нашего демо примера:

  index.html

  Responsive menu | Script Tutorials

  • Home
  • Menu 1
    • Header a
      • Submenu x
      • Submenu y
      • Submenu z
    • Header b
      • Submenu x
      • Submenu y
      • Submenu z
  • Menu 2
    • Header c
      • Submenu x
      • Submenu y
      • Submenu z
    • Header d
      • Submenu x
      • Submenu y
      • Submenu z
  • Menu 3
  • Menu 4
  • Menu 5
  • Back to Responsive menu tutorial

  Тут я бы хотел отметить один момент - meta с атрибутом name=’viewpoint’. Это тег необходим для правильного масштабирования содержимого страницы на вашем экране, будь то монитор компа или мобилка. Весь остальной код не сложен для понимания. Многоуровневый список UL > LI.

  Шаг 2. CSS

  Итак, стили. В первую очередь, для самой страницы:

  css/main.css

  * { margin: 0; padding: 0; } html { background-color: #fff; height: 100%; } body { color: #333333; font: 0.75em/1.5em Arial,sans-serif; } .container { margin-left: auto; margin-right: auto; margin-top: 30px; width: 96%; }

  Теперь напишем стили для верхних элементов меню:

  /* common and top level styles */ #nav span { display: none; } #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: #F5F5F5; border-bottom: 5px solid #333333; float: left; margin-left: 1%; margin-right: 1%; position: relative; width: 98%; } #nav ul.subs { background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; display: none; left: 0; padding: 2%; position: absolute; top: 54px; width: 96%; } #nav > li { border-bottom: 5px solid transparent; float: left; margin-bottom: -5px; text-align: left; -moz-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } #nav li a { display: block; text-decoration: none; -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; white-space: normal; } #nav > li > a { color: #333333; display: block; font-size: 1.3em; line-height: 49px; padding: 0 15px; text-transform: uppercase; } #nav > li:hover > a, #nav > a:hover { background-color: #F55856; color: #FFFFFF; } #nav li.active > a { background-color: #333333; color: #FFFFFF; }

  Реализуем стили для подменю (выпадающий список):

  /* submenu */ #nav li:hover ul.subs { display: block; } #nav ul.subs > li { display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width: 33%; } #nav ul.subs > li a { color: #777777; line-height: 20px; } #nav ul li a:hover { color: #F55856; } #nav ul.subs > li > a { font-size: 1.3em; margin-bottom: 10px; text-transform: uppercase; } #nav ul.subs > li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; } #nav ul.subs > li li:hover { padding-left: 15px; }

  Отлично. Теперь самое главное - каким образом меню станет адаптивным? На самом деле всё очень просто! Воспользуемся CSS3 медиа запросами, которые определят, какие из стилей отображать в зависимости от размеров пользовательского экрана. Также преобразовывать меню мы будем с помощью следующей хитрости. В нашем HTML коде, сразу за верхними уровнями меню, я поставил специальные SPAN-ы. Их мы и будем использовать, присвоив активное состояние (псевдо класс:target), при клике по верхним элементам меню. Таким образом, будет открываться подменю. Смотрим код:

  /* responsive rules */ @media all and (max-width: 980px) { #nav > li { float: none; border-bottom: 0; margin-bottom: 0; } #nav ul.subs { position: relative; top: 0; } #nav li:hover ul.subs { display: none; } #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs { display: block; } #nav ul.subs > li { display: block; width: auto; } }

  Итог

  Итак, только что мы с нуля наклепали прикольное адаптивное меню. Надеюсь, оно вам пригодится. Удачи! До новых встреч!

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

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

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

  • Stream
  • Lab
  • Projects
  • About
  • Contact
  
  Для стилей я использую один и тот же медиа запрос для всех вариантов:

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

  1. Горизонтальное меню Самый простой подход, потому что вам нужно лишь сделать список элементов шириной во всю страницу:
  • Stream
  • Lab
  • Projects
  • About
  • Contact

  @media screen and (max-width: 44em) { nav { ul > li { width: 100%; } } }

  
  
  

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

  Чтобы добиться такого эффекта нам нужно добавить в базовую разметку выпадающий список. Чтобы он работал нам придется добавить JavaScript код, который изменяет значение window.location .href когда происходит событие onchange
  Stream Lab Projects About Contact
  Скрываем список на больших экранах:
  nav { > select { display:none; } }
  На маленьких экранах скрываем базовое меню и показываем выпадающий список. Чтобы помочь пользователю понять, что это меню - мы добавим псевдо-элемент с тектом «Меню»
  @media screen and (max-width: 44em) { nav { ul { display: none; } select { display: block; width: 100%; } &:after { position: absolute; content: "Menu"; right: 0; bottom: -1em; } } }
  С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:
  
  

  Преимущества
  • Не занимает много места
  • Использует «собственные» элементы управления
  Недостатки
  • Для работы требуется JavaScript
  • Происходит дублирование содержимого
  • Выпадающий список не удается стилизовать во всех браузерах
  Пример этого меню .3. Пользовательское ниспадающее меню В данном подходе на небольших экранах скрывается базовое меню и показывается input и label вместо них (используется хак с чекбоксом). Когда пользователь кликает на label, базовое меню показывается под ним.
  Проблемы с использованием хака с чекбоксом Две основных проблемы с этим решением:
• Оно не работает на мобильных версиях Safari (iOS < 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
• Оно не работает на основном браузере ОС Android версии меньше или равной 4.1.2. Давным давно, был баг в WebKit движке, который не позволял использовать псевдо-классы с комбинацией селекторов + и ~

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

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


На больших экранах мы скрываем label.
label { position: absolute; left: 0; display: none; }
На маленьких экранах мы помешаем меню вне содержимого окна и показываем label и input. Чтобы скрыть меню мы устанавливаем для него ширину и отрицательное значение положения. Чтобы помочь пользователю понять, чтобы это меню, мы так же добавим псевдоэлемент с текстом "≡" в label (в виде кода "\2261", чтобы использовать как содержимое псевдоэлемента).

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

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





ПреимуществаНедостатки
• Не семантичный код (input / label)
• Требуется дополнительный HTML
• Абсолютное позиционирование элемента body вызывает ощущение зафиксированного положения
Работает ли это под IE? Все использованные техники преследуют одну цель: создать адаптивное меню для современных браузеров! И все потому, что нет никаких IE8 или ниже ни на каких мобильных устройствах и, поэтому, мы можем совершенно не беспокоиться об этом вопросе.