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

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

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

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

Хабр, привет!

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

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

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

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

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

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

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

.


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

  Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.

  Спасибо вам, что подкидываете таким образом новые идеи и помогаете развивать блог. Кстати, на какую тему хотели бы почитать следующую статью? Напишите в комментариях пожалуйста, для меня это очень важно. А теперь, давайте начнем…

  Как сделать адаптивное меню для сайта

  Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

  В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

  Адаптивное горизонтальное меню

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

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

  

• Скачать прайс
• Контакты
• Отзывы

Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }

Теперь, при уменьшении окна браузера вы увидите следующую картину:

Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.



Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.

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

Меню для большого экрана

Чтобы понять общую схему меню, нужно будет для начала создать структуру меню в HTML и стилизовать его при помощи CSS. Потом на основе полученного материала можно совершенствовать и адаптивный шаблон. Итак, HTML-структура будет выглядеть следующим образом.

Меню на два пункта в HTML

К получившемуся меню необходимо будет добавить стили CSS. В них следует указать размер и цвет шрифта, фон, позиционирование блоков.

Процесс адаптации

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

Далее необходимо будет добавить к этим тэгам соответствующие стили, чтобы получилось визуально привлекательное и читабельное меню. Помимо визуального оформления навигации и иконки меню, нужно оформить соответствующим образом позицию изображения. Так, вводится условие menu_icon span:nth-child(1) {top:0 px};. То есть отступ изображения сверху составит ноль пикселей. Подобным образом необходимо задать значения и для других сторон.

Теперь адаптивное меню почти готово. Стоит обратить внимание на условие По умолчанию иконка меню не будет видна на сайте, поэтому в CSS-документ необходимо добавить дополнительный класс с таким условием: .menu__icon {display: inline-block;}. Это сделает навигацию видимой.



К тому же необходимо добавить в каскадную таблицу стилей задачу, что будет скрывать пункты и подпункты по мере необходимости. Для этого в CSS нужно задать фиксированную позицию меню, оформить дисплей и выравнивание. Пункты скрывают при помощи условий overflow:auto; opacity:0; z-index:1000. Также можно добавить класс menu__links-item, что укажет стиль для пунктов меню, но это уже по желанию разработчика.

Последний штрих

Таким образом, адаптивное меню на CSS почти закончено. Для того чтобы оно отображалось при клике на иконку, необходимо добавить функции. Для простоты лучше использовать jQuery, но если есть желание, можно создать чистый JavaScript. И там, и там будет использоваться одинаковое условие:

• (function($){$(function() $(".menu__icon").on("click", function() $(this).closest(".menu").toggleClass("menu_state_open");});});})(jQuery).

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



Не изменяя стандартам

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

• Написание HTML-тэгов
• Их стилизация при помощи каскадной таблицы стилей (CSS).
• Адаптация уже существующего меню.

Естественно, на всех сайтах есть свои строки меню, но если ресурс создан на CMS, то намного проще будет создать новое адаптивное меню.

Bootstrap

Создание адаптивного функционала не является такой серьезной проблемой, если воспользоваться инструментами Bootstrap. Здесь уже заранее заложены шаблоны для создания горизонтального меню. Нужно лишь подключиться к ресурсу файл bootstrap.js. С помощью этого фреймворка веб-мастер получает возможность создавать навигацию любой сложности. Адаптивное меню с Bootstrap создается при помощи определенного кода.

Особенности метода

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



Немаловажную роль в создании адаптивного функционала здесь играют классы collapse и navbar-collapse , которые отвечают за стиль. Само меню создается путем записывания пунктов, что размещены горизонтально.

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

Выпадающее меню

Ресурс Bootstrap станет отличным помощником для создания адаптивного выпадающего меню. Для этого достаточно просто заменить строку тега

• из предыдущего примера на код, который указан ниже.

  Выпадающие пункты

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

  

  Многоуровневое меню

  Однако создавать можно не только при помощи 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.