Простое адаптивное меню css. Адаптивное меню средствами CSS

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

Однако создавать можно не только при помощи Bootstrap. Если эта библиотека не подключена, можно создать адаптивное многоуровневое меню при помощи HTML и CSS с последующим подключением функции РНР.

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

и
• . Не нужно также забывать о формировании классов, которые в дальнейшем будут обрабатываться каскадной таблицей стилей CSS. Для того чтобы было более понятно, стоит привести небольшой пример написания списков и создания классов.

  Анимация адаптивного выпадающего меню задается при помощи каскадной таблицы стилей. Здесь нужно указать параметры для меню при уменьшении экрана на 50, 75 и 25 %. Такой подход к созданию адаптивного функционала обеспечивает грамотную верстку, при которой меню не «съезжает».

  И в завершение необходимо вписать в документ функцию, указанную ниже.

  Если в сайте не продумано использование каких-либо функций, кроме этой, то все равно для нее нужно создавать отдельный документ скрипта. Если вписать ее в обычный HTML, она попросту отобразится в окне браузера как часть текста и не будет работать.

  

  JQuery

  Также отличным решением будет создание панели навигации на плагине JQuery. Адаптивное меню на таком сервисе делается всего несколько минут. Сам плагин можно скачать в Интернете, он обладает простым и понятным интерфейсом, которым легко и просто пользоваться. Так что проблем с подключением файла стилей не должно возникнуть.

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

  

  После этого необходимо сверстать навигацию, если ее еще нет. Здесь все действует по принципу: «Все гениальное просто». В HTML-документе необходимо создать маркированный список в теге nav . Можно воспользоваться уже приведенным ранее примером или его упрощенной версией, которая выглядит так, как показано ниже.

  На этом этапе работы в браузере будет отображаться только логотип, а само меню будет скрыто. Чтобы оно появилось, необходимо добавить функцию, вызывающую изменения плагина - okayNav.

  var navigation = $("#nav-main").okayNav();

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

  

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

  Joomla

  И последний вариант создания адаптивного меню с помощью системы «Джумла». Это бесплатный сервис для создания веб-сайтов, который представляет собой систему управления содержимым CMS. И как уже было упомянуто в самом начале, если сайт создан при помощи CMS, и нужно изменить имеющееся меню на адаптивное, то лучше всего начать делать функционал сайта с самого первого тега. Точно так же, как и в предыдущих примерах, необходимо создать маркированный список меню в HTML. Только для каждого пункта необходимо написать свой класс. В общей сложности все выглядит так, как показано ниже.

  Дальше необходимо добавить стили. Лучше всего поставить все отступы на 0 рх и применить box-sizing: border-box. Это даст возможность сохранять заданную ширину элементов вне зависимости от того, сколько будет отступов. Далее, для родительского элемента меню (div) стоит задать ширину 90 % и уже после начинать стилизовать каждый пункт по отдельности.

  

  Можно убрать границы, изменить цвет и заливку, сделать оформление, которое будет появляться при наведении курсором. Одним словом, сделать все, что будет соответствовать дизайну ресурса. Последний шаг создания адаптивного меню Joomla заключается в его преобразовании. Чаще всего на Joomla создают такое меню, которое при изменении размера экрана автоматически перестраивается, делясь на несколько строк. Это все тоже делается в CSS, единственная функция, которую следует подключить, - это условие кроссбраузерности. Она позволяет меню выглядеть одинаково в разных браузерах.

  Функция кроссбраузерности

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

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

  

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

  
  

  HTML Разметка

  Перво-наперво нам необходимо выполнить разметку всей основной конструкции нашего меню. Мы создаем элемент навигации, а значит логичным и даже практичным, будет применение HTML5-элемента, тега с присвоенным ему одноименным классом, для последующего форматирования CSS стилей, а также создания и абсолютного позиционирования выпадающей навигационной панели. Класс current указывает на активную / текущую ссылку меню, внешний вид которой, сформируем с помощью css.
  

  • Главная
  • О Нас
  • Портфолио
  • Наши Услуги
  • Контакты

  Как видим, меню, это простой неупорядоченный список с определенным количеством ссылок. Количество пунктов может быть разным, но всё же не стоит городить огород, всё в разумных пределах.
  Далее, пока не ушли далеко, хочу напомнить, а тем кто не знает, пояснить, что HTML5 и запросы media query не поддерживается IE версии старше 9-й(совсем неудивительно). Дабы избежать головной боли в будущем и сделать всё правильно, существуют специальные скрипты и , с помощью которого, мы сможем решить задачу совместимости, предусмотрительно подключив их к документу в разделе .
  

  Всё. С основной разметкой мы разобрались, классы прописаны, костыли добавлены. Теперь перейдем к определению стилей пунктов меню, сформируем внешний вид и с делаем наше меню по-настоящему адаптивным.
  

  CSS Определяем стили

  Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал display:inline-block вместо float:left элемента

• в контейнере навигации nav . Это позволит выравнивать пункты меню влево, вправо и точно по центру, указав свойство text-align элементу списка
  .
  

  /* меню */ .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 { 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 ; }

  /* меню справа */ .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/

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

    Для наглядности мы сделаем одну секцию с большой фоновой картинкой, состоящую из шапки с логотипом и горизонтальным меню.

    

    HTML разметка

    Задача понятная, внутри тега section будет находится шапка сайта header , внутри которой блок div с логотипом и навигационная панель nav . Она будет использоваться, как контейнер для меню из маркированных списков ul с пунктами меню-ссылками a .

    
    
    
    
    
    
    

    
    
    • Главная
    
    
    • Поиск
    
    
    • Услуги
    
    
    • Новости
    
    
    • Фотографии
    
    
    • Правила
    
    
    
    
    
    
    

    Как обычно HTML структура смотрится очень просто - чистый код и ничего лишнего, приятно посмотреть. Однако, если посмотреть на результат в браузере, то возникает желание побыстрее открыть файл стилей и начинать наводить красоту.

    

    Этим мы с вами сейчас и займемся.

    Стилизация секции - section

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

    Section {
    background: url(bg.jpg);
    }

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

    Background-size: cover;
    height: 100vh;

    При просмотре на больших мониторах, при недостаточных размерах фотографии, она начнет размножаться. Запретим повтор фона.

    Background-repeat: no-repeat;

    На мобильных телефонах, без выравнивания фона по центру, он может срезаться.

    Background-position: center center;

    Секция подготовлена, в ней мы пропишем стили для шапки.

    

    Стилизация шапки сайта - header

    Немного забежим вперёд и посмотрим из каких блоков будет состоять шапка - это блок div с логотипом и блок навигации nav .

    

    Как поставить два блока в ряд, ведь в естественном виде блоки стоят друг под другом? Flexbox метод отлично справляется с этой задачей - ставит в ряд и выравнивает относительно контейнера header так, как нам надо.

    Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    Свойство box-shadow рисует нижнюю тень под шапкой, таким образом мы визуально отделяем шапку сайта от контента. Высоту шапки height предпочтительно задавать не в пикселях, а в относительных единицах, например в процентах, тогда на любых экранах будут сохранятся пропорции элементов сайта.

    Height: 18%;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);

    Результат работы flexbox-а и появившуюся тень, мы видим ниже.

    

    Работа с логотипом

    Сейчас логотип прижат к левому краю окна браузера, сдвинем его немного вправо.

    Logo img {
    margin-left: 2.3em;
    }

    Следующий код делает логотип адаптивным.

    Max-width: 100%;

    Стилизация меню - ul

    Убираем маркеры у пунктов меню.

    Ul {
    list-style-type: none;
    }

    Превращаем вертикальное меню в горизонтальное, выравнивая все по центру, применяя flexbox метод. Свойство transition обеспечивает плавную работу hover эффекта, об этом позже.

    Ul {
    display: flex;
    flex-flow: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: .5s;
    }

    Пункты меню li стоят очень плотно друг к другу и надо поработать со шрифтом и ссылками.

    

    Зададим поля вокруг пунктов меню.

    Ul li a {
    padding: 10px 20px;
    }

    Текст сделаем заглавными буквами и уберем подчеркивание ссылок.

    Text-transform: uppercase;
    text-decoration: none;

    Выбираем шрифт потемнее для контраста и делаем его жирным (меня бесит, когда цвет текста сливается с фоновым цветом сайта).

    Color: #262625;
    font-weight: bold;

    Создаем простой эффект при наведении и не забываем про плавный переход.

    Ul li a:hover {
    background: #000;
    color: #fff;
    transition: .5s
    }

    На следующем уроке мы сделаем наше меню адаптивным , делая медиа-запросы. Смотрите весь код на jsfiddle .

    Возвращаясь к теме всё возрастающей значимости мобильных устройств, невозможно обойти стороной меню сайта. По бо́льшей части для создания адаптивных меню используются решения на 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-анимации.