Адаптивное меню с выпадающим списком. Как сделать адаптивное меню? Примеры

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

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

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

  Похожие статьи на эту тему:

  Добавляем HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

  1	<a href = "#0" class = "cd-nav-trigger" > Menu<span >

  Последняя строка отвечает за навигацию при маленьком разрешении экрана.

  Добавляем CSS

  Архив с примером содержит файл style.css .
  В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
  Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css , то не забудьте подключить его в свой html файл между тегами .

  1	<link rel = "stylesheet" href = "css/style.css" >

  Добавляем JQuery

  Из архива копируем папку js. И подключаем скрипты в наш html документ.

  1 2 3

  <script src = "js/modernizr.js" > <script src = "js/jquery-2.1.1.js" > <script src = "js/main.js" >

  Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!

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

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

  CSS-Only Dark Menu от Джона Ербанка

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

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

  Посмотреть демо

  Full Responsive Portfolio от Celine

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

  Посмотреть демо

  Bootstrap Navbar от Bobby

  Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap .

  При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки «прячутся » под переключатель меню. Это распространенный метод работает во всех браузерах.

  Посмотреть демо

  Clean Dropdown Toggle от Бойда Массье

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

  Посмотреть демо

  Animated Sliding Bar от Антуана Виниаля

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

  На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active .

  Посмотреть демо

  Basic Responsive Menu от Эша Нельсона

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

  Посмотреть демо

  Sliding Drawer Hamburger Nav от Ханьлиня Чонга

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

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

  Посмотреть демо

  Single-Page Mic Nav от Travis

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

  Посмотреть демо

  Morphing Circular Menu от Sergio

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

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

  Посмотреть демо

  Pure CSS Flexbox Nav от Джо Уоткинса

  Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3 . Мы уже публиковали , с которым я советую вам ознакомиться.

  Это меню построено на Flexbox , в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS , реализована поддержка выпадающих меню для сайта.

  Посмотреть демо

  Animated Toggle от Джо Баггали

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

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

  Посмотреть демо

  Flexible Nav Menu от gantit

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

  Посмотреть демо

  Pure CSS Tabs от Мартина Гайдичара

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

  Посмотреть демо

  Pure CSS Breadcrumbs от Оливера Ноблича

  «Хлебные крошки » не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS .

  Посмотреть демо

  Batman Nav от Mighty Shaban

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

  Система меню красиво скомпонована. Она может пригодиться при разработке любого одностраничного макета.

  Посмотреть демо

  Multilevel Dropdown от Стефани Уотер

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

  Посмотреть демо

  Pure CSS eBook Webapp от Энди Фицсаймона

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

  Посмотреть демо

  Equal-Width Navigation от Дориана Коврана

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

  Посмотреть демо

  Stylized Multilevel Navbox от Эндрю ДеБрю

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

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

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

  

  Шаг 1. HTML

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

  index.html

  • 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; } }

  Итог

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

  Привет. Очень давно не писал постов на тему работы html/css. Недавно как раз начал верстать новый макет и в процессе наткнулся на интересный прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока). Итак, сегодня реализуем на css резиновое меню.

  Кому лень читать статью, можно посмотреть это видео. Автор также все очень классно объясняет:
  

  Резиновое меню на CSS — шаг 1

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

  1. блок обертка для меню
  2. само меню, выведенное через маркированный список (тег ul)
  3. ну и пункты меню внутри, а в них, соответственно, уже ссылки

  Все понятно, вот такой у меня код разметки:
  

  
  

  
  
  • Пункт 1
  
  
  • Пункт 2
  
  
  • Пункт 3
  
  
  • Пункт 4
  
  
  • Пункт 5
  
  

  
  

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

  Шаг 2 — базовые стили

  Шаг 3 — реализуем резиновость

  Теперь беремся за само меню. У него (у тега ul) я уберу маркеры, сделаю фоновый , и, самое главное, свойством display: table-row заставлю контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.

  R-menu{ background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%); display: table-row; list-style: none; }

  Как видите, приведенный код как раз решил все, о чем я писал. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator.

  R-menu li{ vertical-align: bottom; display: table-cell; width: auto; text-align: center; height: 50px; border-right: 1px solid #222; }

  • vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
  • display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
  • width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
  • text-align: center — это просто для выравнивания текста внутри по центру
  • height: 50px — задаем высоту в 50 пикселей
  • ну и border-right это просто граница справа, такой разделитель для пунктов

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

  R-menu li a{ text-decoration: none; width: 1000px; height: 50px; vertical-align: middle; display: table-cell; color: #fff; font: normal 14px Verdana; }

  И вот так теперь выглядит меню:
  
  Опять же, поясню некоторые строки:

  • свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
  • width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
  • vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
  • font — ну это просто набор установок для шрифта. Читайте про css свойства для шрифтов в .

  Шаг 4 (по желанию) можно добавить интерактивности

  Например, чтобы при наведении изменялся цвет пункта меню. Реализуется это совсем просто, с помощью псевдокласса hover:

  R-menu li:hover{ background-color: #6bba70; }

  Тестируем меню на резиновость

  Отлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое, как я вам и обещал. Что ж, добавлю в меню еще 2 пункта:
  
  Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.

  Добавлю еще 1 длинный пункт:
  
  Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom , о котором я вам говорил, то меню выглядело бы хуже.

  Уменьшу меню до трех пунктов.
  
  Пунктам стало гораздо свободнее, но само меню не поменялось в ширине. Вот мы и сделали 100% резиновое меню!

  Как его адаптировать?

  В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.

  Ну а если вы хотите как-то изменить или поправить меню на мобильных устройствах или широких экранах, то вам в помощь! Успехов в сайтостроении!