Адаптивное меню для сайта
Время чтения: < 1 мин. 
Всем привет!
Сегодня хочу поделиться интересным решением для основного меню.Такой подход может стать альтернативой стандартному выпадающему меню.Кроме того оно уже адаптивно.
Смотреть примерСкачать
Похожие статьи на эту тему:
Добавляем HTML
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <header>
<nav>
<ul>
<li><a href="#0">О нас</a></li>
<li><a href="#0">Проекты</a></li>
<li><a href="#0">Блог</a></li>
<li><a href="#0">Контакты</a></li>
<li>
<a href="#0"><span>Категории</span></a>
<ul>
<li><a href="#0">Меню</a></li>
<li><a href="#0">Категория 1</a></li>
<li><a href="#0">Категория 2</a></li>
<li><a href="#0">Категория 3</a></li>
<li><a href="#0">Категория 4</a></li>
<li><a href="#0">Категория 5</a></li>
<li><a href="#0">Placeholder</a></li>
</ul>
</li>
</ul> <!-- .cd-main-nav -->
</nav> <!-- .cd-main-nav-wrapper -->
<a href="#0">Menu<span></span></a>
</header> |
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
HTML КОД
1 | <a href="#0">Menu<span></span></a> |
Последняя строка отвечает за навигацию при маленьком разрешении экрана.
Добавляем CSS
Архив с примером содержит файл style.css.
В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.
1 | <link rel="stylesheet" href="css/style.css"> |
Добавляем JQuery
Из архива копируем папку js. И подключаем скрипты в наш html документ.
1 2 3 | <script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!
Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.
Всем удачи!
Источник: Оригинал
С Уважением, Михалев Валентин
20 полезных сниппетов CSS для создания адаптивного меню
Приведенные в этой статье сниппеты адаптивного кода идеально подойдут для любого типа макетов. Вы найдете в этом перечне вертикальные и горизонтальные меню для сайта, выпадающие и боковые меню с различными анимационными эффектами. Адаптивный дизайн является техникой, в которой каждый год появляются новые тенденции. Эти сниппеты послужат дизайнерам в качестве отправной точки для многих веб-проектов.
Кроме дизайна этот сниппет задает адаптивное выпадающее меню. Панель навигации при стандартном окне занимает обычное горизонтальное положение.
На меньших контрольных точках меню располагается на весь экран. При наведении курсора на основные элементы меню на экран выводятся пункты подменю, имеющие более светлый серый фон. Это решение идеально подойдет для сайтов, на которых не слишком много ссылок на разделы. Таким образом они смогут отображаться на странице, как блок элементов.
Посмотреть демо
Этот полностью адаптивный макет портфолио включает в себя простую, но эффективную панель навигации. Когда окно просмотра уменьшается до определенной контрольной точки, пункты адаптивного меню для сайта скрываются, на экране остается только кнопка переключения меню. Пользователь может нажать на нее, чтобы развернуть или скрыть меню, которое разворачивается внизу под заголовком.
Посмотреть демо
Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap.
При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки «прячутся» под переключатель меню. Это распространенный метод работает во всех браузерах.
Посмотреть демо
Эта плоская адаптивная панель навигации с выпадающими меню создана на чистом CSS. В адаптивном состоянии панель навигации превращается в плавающее меню, в котором ссылки выводятся в виде блока. Каждое внутреннее выпадающее меню также может быть переключено, чтобы предоставить доступ к пунктам подменю.
Посмотреть демо
Это выпадающее меню для сайта является одним из самых уникальных примеров навигации. Вы видите светло-зеленую вкладку, при нажатии на которую вверху разворачивается панель навигации со ссылками меню. Каждая ссылка имеет плавающую ширину и подстраивается под любой размер экрана.
На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active.
Посмотреть демо
На первый взгляд это меню кажется стандартным: традиционные ссылки, гамбургер-переключатель меню и плоская цветовая гамма. Хотя оно лишено гламурного блеска, меню работает и работает удобно и просто. Весь его код написан на Haml и SASS.
Посмотреть демо
Возникновение раздвижных меню для сайтов породило множество споров между дизайнерами и разработчиками. Некоторые считают, что этот способ реализации позволяет поместить в меню много контента, не отнимая полезного пространства. Другие критикуют этот тип меню, так как ссылки скрыты от глаз пользователя.
По этой причине выдвижные меню следует использовать с осторожностью. В первую очередь, когда сайт имеет большое количество элементов навигации. И если вы ищете шаблон подобного типа меню, советую обратить внимание на данный сниппет. Он реализует структуру, с которой знакомы многие пользователи.
Посмотреть демо
В этом меню ссылки занимают большую часть экрана, а с помощью фоновых шаблонов создается матричный эффект. Это не совсем практично для обычных сайтов, но этот эффект можно использовать для творческих проектов или веб-портфолио.
Посмотреть демо
Давайте немного поэкспериментируем с этим примером меню для сайта. Взглянув на него, можно подумать, что это обычное выдвижное меню. Но после нажатия на иконку вы увидите уникальный анимированный эффект отображения меню.
Данное решение вряд ли найдет широкое применение в коммерческой сфере. Но все равно это замечательный пример того, какое широкое поле для творчества предоставляет адаптивный дизайн.
Посмотреть демо
Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3. Мы уже публиковали полное руководство по Flexbox, с которым я советую вам ознакомиться.
Это меню построено на Flexbox, в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS, реализована поддержка выпадающих меню для сайта.
Посмотреть демо
Если вы любите эффекты анимации, то можете воспользоваться этим решением. По умолчанию ссылки выравниваются рядом, поддерживаются выпадающие подменю.
После уменьшения окна просмотра панель навигации скрывается под ссылкой переключения. Меню преобразуется в большой блок, который после выводится на экран с помощью анимации.
Посмотреть демо
Наиболее практичным является использование в адаптивном дизайне нескольких контрольных точек. Вот почему мне нравится эта система навигации. В ней отображено, как стандартная горизонтальная панель навигации может пройти через множество различных фаз. Этот сниппет обеспечивает гибкость в настройке и может органично вписаться в любой сайт.
Посмотреть демо
Вкладки считаются приемлемым решением для навигации, обеспечивающим перемещение между страницами и внутренним контентом. Когда окно просмотра уменьшается, то они ведут себя как обычный блок навигации с эффектами анимации. Стили дизайна можно легко расширить по своему вкусу.
Посмотреть демо
«Хлебные крошки» не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS.
Посмотреть демо
В этом адаптивном меню для сайта ссылки установлены на одностраничный прокручиваемый макет, с их помощью осуществляется перемещение между разделами. При изменении размеров окна просмотра горизонтальное меню преобразуется в вертикальный блок, который скрывается за иконкой.
Система меню красиво скомпонована. Она может пригодиться при разработке любого одностраничного макета.
Посмотреть демо
Разработка многоуровневой навигации требует тщательного планирования. Этот сниппет является не только работоспособным, но и поддерживает адаптивные эффекты через CSS. Когда панель навигации уменьшается, пользователь может кликнуть по иконке, расположенной рядом с определенным пунктом меню и отобразить скрытое подменю. Эта техника позволяет поддерживать управляемость кода.Посмотреть демо
Интерфейс меню был разработан как имитация стандартного решения iOS с панелями навигации в верхней и нижней частях экрана. В этом сниппете был использован CSS-флексбокс, с помощью которого ссылки многоуровневого меню для сайта и элементы страницы пропорционально изменяют свой размер, чтобы соответствовать размеру окна браузера.
Посмотреть демо
Этот интерфейс содержит равные по ширине блоки ссылок панели навигации. Каждая ссылка занимает одинаковый процент экрана по горизонтали до тех пор, пока не будет достигнута определенная малая контрольная точка. После этого панель меню скрывается под иконкой переключателя. Компактный, красивый и функциональный код.
Посмотреть демо
В этом сниппете тот же эффект был воспроизведен в сочетании адаптивной функцией. Это меню удивительно гибкое и достаточно уникальное по сравнению с другими примерами адаптивных решений.
Посмотреть демо
Это плавающее меню для сайта может быть открыто из любого места сайта. Но при включении меню через иконку оно не раскрывается, а выезжает с правой стороны экрана.
Ссылки на больших экранах располагаются горизонтально и изменяют расположение на вертикальное при просмотре на небольших экранах. Меню работает очень плавно и естественно. Возможно, это немного сложная анимация, но она обязательно обратит на себя внимание пользователей.
Посмотреть демо
Удивительное разнообразие форм и элементов, доступных в адаптивном дизайне, способно привести в волнение даже самого искушенного разработчика. Система навигации часто является одной из самых сложных областей адаптивного веб-дизайна, но эти сниппеты станут для вас отправной точкой, отталкиваясь от которой вы сможете генерировать собственные идеи.
Данная публикация представляет собой перевод статьи «20 Useful CSS Snippets for Responsive Menus» , подготовленной дружной командой проекта Интернет-технологии.ру
Большой обзор красивых многоуровневых меню с codepen / mr. Gefest corporate blog / Habr
Хабр, привет!
На С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 [work for mobile touch screen]
Решение неплохое, но слишком уж много используется классов. Радует, что нет 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
KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Адаптивное горизонтальное меню
В наше время для сайта всё чаще становится актуальным воплощение адаптивного горизонтального меню, это то меню, которое на мобильных устройствах будет схлопываться и принимать удобный для навигации вид. Чтобы внедрить адаптивное горизонтальное меню на странице, достаточно применить навыки в css и в некоторых случаях дополнить его скриптом js.В этой статье хочу поведать вам несколько примеров, где будут рассмотрены: адаптивное горизонтальное многоуровневое меню с использованием js скрипта и без него, и адаптивное горизонтальное меню выполненное чисто на css.
В основном навигацию располагают в видимой области сайта и как правило в шапке страницы, и далее вы узнаете, как можно сделать адаптивное горизонтальное меню, где будут показаны несколько примеров.А уже какой из вариантов вы будете использовать, — это решать вам.
Представленные ниже на DEMO примеры для меню прошли проверку на корректность отображения и адаптивность в основных браузерах. Есть некоторая погрешность всего в 1-2 px для некоторых не значительных элементов в горизонтальном меню при просмотре через браузер IE, но это можно подправить, либо вовсе проигнорировать.
Адаптивное горизонтальное меню на css.
В первом примере я покажу, как можно сделать адаптивное горизонтальное меню применяя только css.
СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.
Очень внимательно!Выбрав на DEMO расположение меню ( слева, по центру или справа ), скопируйте код css и html и вставьте к себе на страницу html.
Вот этот код @media screen and (max-width: 700px)… и отвечает за схлопывание ( адаптацию ) меню, где на маленьких устройствах горизонтальная часть меню посредством css скрывается, и в этот же момент становится видимым навигационное меню, которое в полном объёме умещается на мобильном экране пользователя.
Здесь каждый пропишет своё количество пикселей.
Скачать адаптивное горизонтальное меню на CSS
Этот вариант меню так же адаптирован и выполнен на css без использования js скриптов подойдет тем, у кого на сайте присутствует огромное количество категорий и пунктов меню, и без многоуровневого меню просто не обойтись.
СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.
Будьте внимательны!
Выбрав на DEMO расположение многоуровневого меню ( слева, по центру или справа ), скопируйте кусок кода css и замените его на аналогичный в файле style.css ( на архив ссылка ниже ).
Скачать многоуровневое адаптивное меню на CSS
СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.
В первом и во втором примере адаптивного меню на JS можно по желанию удалить логотип.
При выборе положения меню не обращайте внимание на указатель пунктов, на вашем сайте он будет работать безукоризненно.
Скачать горизонтальное адаптивное меню на JS
СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.
Схлопывание меню здесь регулируется как в CSS ( описание в предыдущих примерах ), так и в скрипте, строка: var mediasize = 800;.
Для нужного местоположения меню, — копируете полученный код и заменяете им исходный у себя.
Скачать многоуровневое адаптивное меню на JS
Похожие статьи
Добавить комментарийАдаптивное меню на CSS flexbox
Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.
Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно «не париться» по поводу медиа запросов.
На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.
Шапка состоит из трех логичных блоков:
- Блок с логотипом
- Блок с меню, сделанное на списках
- Блок с иконкой и номером телефона
Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.
Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.
Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.
<body>
<header>
<div>
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<nav>
<ul>
<li><a href="#">Города</a></li>
<li><a href="#">Замки</a></li>
<li><a href="#">Красоты</a></li>
<li><a href="#">Маршруты</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<div>
<i aria-hidden="true"></i>
+380973457685
</div>
</header>
</body>
Так будет выглядеть шапка без применения стилей, так и должно быть.
А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.
.header {
display: flex;
}.header .menu ul {
display: flex;
}
Вот так работает flexbox.
Добавим стили и шапка готова. Дальше нам нужно будет её адаптировать под разные размеры экранов. Обратите внимание, как мало написано кода.
*{
margin: 0;
padding: 0;
}body {
background-color: #fff;
font-family: "Open Sans", sans serif;
line-height: 1.5;
}
.header {
border: 2px solid #ccc;
display: flex;
flex-wrap: wrap; /*перенос строки */
justify-content: space-between; /*прижимает содержимое к краям */
align-items: center; /*выравнивает элементы по центру на вертикальной */
}
.header .logo {
padding-left: 30px;
}
.header .menu ul {
display: flex;
list-style: none;
}
.header .menu ul li {
margin: 20px 10px;
}
.header .menu ul a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #06a327;
}
.phone {
font-size: 110%;
color: #333;
padding-right: 40px;
}
Работаем над адаптивностью шапки
Суть процесса по адаптивности сайта заключается в поиске контрольных точек, при которых элементы сайта будут не видны или выглядеть небрежно. Наша задача при сжатии браузера по ширине, увидеть проблему и исправить, дописав соответствующий код (медиа запрос) в файл стилей.
Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.
Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.
@media screen and (max-width: 900px) {
.phone {
margin: auto;
}
}
На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.
Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.
@media screen and (max-width: 500px) {
.header {
flex-direction: column;
}
.header .menu ul {
flex-direction: column;
align-self: center;
}
.header .menu ul li {
margin: 5px;
}
}
Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс «Вёрстка сайта с нуля»
-
Создано 08.03.2018 10:18:00 -
Михаил Русаков
Создано 08.03.2018 10:18:00
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Как создать адаптивное меню для сайта с выпадающим списком на CSS
Адаптивное меню незаменимо в любом современном сайте, который следует тенденциям и развивает свой продукт. К сожалению, многие видят процесс создания мобильного меню очень сложным и прибегают к помощи специалистов. Специально для вас я подготовил отличное адаптивное меню, которое легко установить на сайт.
Адаптивное меню решает многие технические моменты даже при сложной многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней 3-4 уровня. При том вся необходимая информация будет находится в пределах 2 кликов — никаких горизонтальных прокруток. Именно этот вариант повышает юзабилити в разы, обеспечив пользователю удобную навигацию.
Однако, как я уже говорил, у многих процесс создания мобильного меню связан с сложностями и продолжительной работой. Действительно, для создания качественного адаптивного меню следует приложить немало усилий. Но не стоит переживать, сегодня я расскажу как можно достаточно просто и быстро создать мобильное меню для своего сайта на готовом примере.
Для начала давайте посмотрим на пример адаптивного меню:
ПРИМЕР СКАЧАТЬ
Как создать адаптивное меню
Первым делом рассмотрим структуру HTML-файла, а в частности блок <head>:
<head> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»css/reset.css»> <link rel=»stylesheet» href=»css/style.css»> <script src=»js/modernizr.js»></script> </head>
<head> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»css/reset.css»> <link rel=»stylesheet» href=»css/style.css»> <script src=»js/modernizr.js»></script> </head> |
Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на Iphone. Я уже писал о нём в статье про мета-запросы.
Строка 3 — подключаем стили, позволяющие сделать сброс параметров, установленных браузером по умолчанию. Для тех, кто не знал — да, каждый браузер устанавливает свои параметры стилей по умолчанию.
Строка 4 — подключаем файл с правилами для нашего меню.
Строка 5 — подключаем JS-файл, для корректной работы адаптивного меню.
Теперь рассмотрим структуру меню в <body>:
<body> <header> <nav> <ul> <li><a href=»#ankor»>О нас</a></li> <li><a href=»#ankor»>Каталог</a></li> <li><a href=»#ankor»>Портфолио</a></li> <li><a href=»#ankor»>Контакты</a></li> <li> <a href=»#ankor»><span>Список</span></a> <ul> <li><a href=»#ankor»>Меню</a></li> <li><a href=»#ankor»>Пункт №1</a></li> <li><a href=»#ankor»>Пункт №2</a></li> <li><a href=»#ankor»>Пункт №3</a></li> <li><a href=»#ankor»>Пункт №4</a></li> <li><a href=»#ankor»>Пункт №5</a></li> <li><a href=»#ankor»>Placeholder</a></li> </ul> </li> </ul> <!— .cd-main-nav —> </nav> <!— .cd-main-nav-wrapper —> <a href=»#ankor»>Menu<span></span></a> </header> </body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <header> <nav> <ul> <li><a href=»#ankor»>О нас</a></li> <li><a href=»#ankor»>Каталог</a></li> <li><a href=»#ankor»>Портфолио</a></li> <li><a href=»#ankor»>Контакты</a></li> <li> <a href=»#ankor»><span>Список</span></a> <ul> <li><a href=»#ankor»>Меню</a></li> <li><a href=»#ankor»>Пункт №1</a></li> <li><a href=»#ankor»>Пункт №2</a></li> <li><a href=»#ankor»>Пункт №3</a></li> <li><a href=»#ankor»>Пункт №4</a></li> <li><a href=»#ankor»>Пункт №5</a></li> <li><a href=»#ankor»>Placeholder</a></li> </ul> </li> </ul> <!— .cd-main-nav —> </nav> <!— .cd-main-nav-wrapper —> <a href=»#ankor»>Menu<span></span></a> </header> </body> |
Думаю, здесь нечего прокомментировать, за исключением строки 23 — в ней мы прописываем элемент навигации для мобильного меню.
После того, как мы составили структуру, необходимо добавить до закрывающего тега </body> ещё 2 JS-файла:
<body> … <script src=»js/jquery-2.1.1.js»></script> <script src=»js/main.js»></script> </body>
<body> …
<script src=»js/jquery-2.1.1.js»></script> <script src=»js/main.js»></script>
</body> |
Если jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.
Вывод
После небольших изменений в коде «под себя» мы получаем отличное адаптивное меню, в котором содержится 2 типа навигации:
- стандартная;
- мобильная.
Адаптивное меню обеспечит удобство навигации по сайту и его непременно оценят посетители вашего ресурса. К тому же, это отличное дополнение в создании качественного адаптивного сайта, в котором все элементы должны быть на своих местах.
Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!
Вконтакте
Google+
Это интересно
Подписаться на новостиАдаптивное меню на чистом CSS
Автор Алексей На чтение 3 мин. Опубликовано
Последнее изменение поста: 6 июня 2019 в 17:36
В данном уроке я расскажу о том как на чистом CSS (без использования JS) сверстать горизонтальное адаптивное (складывающегося) — которое можно установить на любой сайт. Это сейчас очень актуально — так как пришла эра быстрых сайтов, скоро походу фрейверки типа бутстрапа будут не в моде — для тех кто хочет хороших позиций в гугле.
Посмотреть демо
HTML разметка меню
<header>
<div>
<a href="#" target="_blank">web-revenue.ru</a>
<label for="toggle-1"><ul><li></li> <li></li> <li></li></ul></label>
<input type="checkbox">
<nav>
<ul>
<li><a href="#logo">Главная</a></li>
<li><a href="#about">О компании</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#gallery">Галерея</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</div>
</header>Здесь все при дельно просто — за основу взять стандартные HTML элементы
CSS оформление меню
Сначала зададим стили основным элементам
body{margin:0;overflow-x:hidden}
header{width:100%;display:table;background-color:#002e5b;margin-bottom:35px}
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width: 1200px) { .container{max-width:1140px} }
#logo{float:left;font-size:1.7rem;text-transform:uppercase;color:#fff;font-weight:500;text-decoration:none;padding:11px 0}
nav{width:auto;float:right;margin-top:7px}
nav ul{display:table;float:right;margin:0;padding:0}
nav ul li{float:left;list-style-type:none}
nav ul li:last-child{padding-right:0}
nav ul li a{color:#fff;font-size:19px;padding:7px 19px;display:inline-block;text-decoration:none}
nav ul li a:hover{background-color:#fff;color:#002e5b;text-decoration:underline}
.toggle-menu ul{display:table;width:31px;margin-left:0;padding-left:0;margin:5px}
.toggle-menu ul li{width:100%;height:3px;background-color:#e9f0f7;margin-bottom:4px;list-style:none}
.toggle-menu ul li:last-child{margin-bottom:0} input[type=checkbox],label{display:none}И добавляем адаптивность.
@media only screen and (max-width: 967px) {
header{padding:20px 0}
#logo{padding:0}
input[type=checkbox]{position:absolute;top:-7777px;left:-7777px;background:none} input[type=checkbox]:focus{background:none}
label{float:right;display:inline-block;cursor:pointer;margin-right:25px}
input[type=checkbox]:checked ~ nav{display:block} nav{display:none;position:absolute;right:0;top:64px;background-color:#002e5b;padding:0;z-index:99}
nav ul{width:auto}
nav ul li{float:none;padding:0;width:100%;display:table}
nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}
}
@media only screen and (max-width: 360px) {
label{padding:5px 0}
#logo{font-size:1.1rem}
nav{top:47px}
}Скачать исходники
В принципе все, вам нужно только подправить мелкие нюансы под себя и все — легкое адаптивное меню без js готово.