Адаптивное меню для сайта: Адаптивное меню для любого размера экрана устройства

Содержание

Адаптивное меню для любого размера экрана устройства

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

Урок о том как создать адаптивный шаблон можно находится здесь — Как создать адаптируемый шаблон.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Подключите обязательно последнюю jQuery библиотеку(она доступна здесь). Структура следующая:

<nav > 
    <ul>
        <li>
            <a  href="#" title="">
                <span > <i aria-hidden="true" ></i></span><span>Главная</span>
            </a>
        </li>
        <li>     
            <a href="#" title=""><span> <i aria-hidden="true"></i></span><span>Сервисы</span></a>  
        </li>
        <li>
            <a  href="#" title=""><span ><i  aria-hidden="true"></i></span><span>Портфолио</span></a>
        </li>
        <li>
            <a  href="#" title=""><span ><i  aria-hidden="true"></i></span><span>Блог</span></a>
        </li>
        <li>
            <a  href="#" title=""><span ><i  aria-hidden="true"></i></span><span>Команда</span></a>   
        </li>
        <li>
            <a  href="#" title=""><span ><i  aria-hidden="true"></i></span><span>Контакты</span></a>
        </li>
    </ul>
</nav>

Чтобы использовать значок мы задаем специальные классы icon-name. Также чтобы использовать библиотеку Modernizr.js мы добавили к тегу <body> класс no-js, что позволяет показывать меню если Javascript отключен в браузере пользователя.

Javascript&CSS часть

Для начала зададим основные стили:

.nav ul {
    max-width: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.5em;
    font-weight: 300;
}
 
.nav li span {
    display: block;
}
 
.nav a {
    display: block;
    color: rgba(249, 249, 249, .9);
    text-decoration: none;
    transition: color .5s, background .5s, height .5s;
}
 
.nav i{
    transform: translate3d(0, 0, 0);
}
 
a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Также при наведении все элементы меню затемняются:

 .no-touch .nav ul:hover a {
    color: rgba(249, 249, 249, . 5);
}
 
.no-touch .nav ul:hover a:hover {
    color: rgba(249, 249, 249, 0.99);
}

Каждый элемент меню имеет свой цвет:

.nav li:nth-child(6n+1) {
    background: rgb(208, 101, 3);
}
 
.nav li:nth-child(6n+2) {
    background: rgb(233, 147, 26);
}
 
.nav li:nth-child(6n+3) {
    background: rgb(22, 145, 190);
}
 
.nav li:nth-child(6n+4) {
    background: rgb(22, 107, 162);
}
 
.nav li:nth-child(6n+5) {
    background: rgb(27, 54, 71);
}
 
.nav li:nth-child(6n+6) {
    background: rgb(21, 40, 54);
}

При наведении элемент меню становится больше по вертикали, но увеличивается оно плавно:

.nav a {
    height: 9em;
}
 
.no-touch .nav a:hover ,
.no-touch .nav a:active ,
.no-touch .nav a:focus {
    height: 10em;
}  
 
.no-touch .nav a:hover .icon + span {
    margin-top: 3. |\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
}; 
 
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" aria-hidden="true"><i aria-hidden="true"> </i> Menu</button>');
 
document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
}
 
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
 
    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}

Вывод

Вот как данное меню адаптируется под разные разрешения экранов:

Ширина экрана 320px:

Ширина экрана 768px:

Успехов!

Источник: tympanus. net

7 jQuery плагинов меню для Bootstrap / jQuery плагины и JavaScript решения / Постовой

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

Смотрите также:

Responsive Bootstrap Mega Menu

Очень мощный плагин для создания мегаменю с широчайшими возможностями: пунктами меню может быть не только текст (в том числе форматированный), но и видеоролики, карты Google, контактные формы, рекламные банеры и много другое. Использует Bootstrap и работает во всех современных браузерах.

Yamm

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

Bootstrap Affix, Fixed Nav And Scroll Shadow

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

HOE Navigation Menu

HOE Navigation Menu содержит как горизонтальную, так и вертикальную панель и поддерживает до 4 уровней вложенности, которые открываются с различными эффектами. Довольно легкий и быстрый плагин, использующий CSS3 и jQuery.

Web Slide – Responsive Mega Menu for Bootstrap 3+

CSS3 и немного JS-кода творят чудеса. Шикарное мегаменю для Bootstrap 3, стильное, современное и адаптивное. Off-canvas меню, accordion меню, верхнее фиксированное, форма контактов и множество других элементов позволят воплотить любой ваш замысел.

Стоимость: $10

MegaNavbar

Созданный с помощью чистого HTML5 и CSS3, этот компонент для навигации прекрасно работает на всех современных устройствах, нетребователен к системным ресурсам и позволяет размещать на нем практически все элементы Bootstrap.

Стоимость: $5

TT Menu

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

Стоимость: $19

Адаптивное меню на 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
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk. com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Меню и навигация

29.04.2019 2 999 Animation / Menu & Nav / Codepen

Эффект наведения следящий за курсором

Подчеркивание ссылки при наведении на пункт меню

18.06.2018 6 653 Скрипты / Menu & Nav

Canvi — off-canvas панель навигации

Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.

19.02.2018 6 851 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

21.12.2017 15 174 Скрипты / Menu & Nav

Slinky — адаптивное многоуровневое меню

Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.

11.09.2016 4 795 Скрипты / Menu & Nav

Гибкое горизонтальное меню

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

19.04.2016 8 137 Скрипты / Menu & Nav

Slide out sidebar меню

Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

24.12.2015 6 209 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

25.06.2014 5 104 Скрипты / Menu & Nav

Диагональное меню на CSS

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

23.01.2014 3 457 Скрипты / Menu & Nav

Lavalamp меню на CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.

03.01.2014 3 976 Скрипты / Menu & Nav

Анимированный border с меню

Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.

03.07.2013 13 417 Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css

27.06.2013 4 107 Скрипты / Menu & Nav

Responsive nav — плагин адаптивного меню

Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.

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

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

Чтобы внедрить адаптивное горизонтальное меню на странице, достаточно применить навыки в 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

Адаптивное плавно выпадающее меню js

a {

color: #fff;

text-decoration: none; }

. container {

max-width: 1170px;

margin: 0 auto;

padding: 0 10px;

-webkit-box-sizing: border-box;

box-sizing: border-box; }

header {

background-color: #212326;

padding: 8px 0;

position: fixed;

left: 0;

width: 100%; }

header .headerInner {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

color: #ffffff; }

header .headerInner .logo {

text-transform: uppercase;

font-size: 28px; }

header .headerInner .menu {

padding-left: 70px; }

header .headerInner .menu .part {

margin: 0 19px;

width: auto;

letter-spacing: .5px; }

header .headerInner . hamburger {

display: none;

width: 30px;

height: 30px; }

header .headerInner .hamburger svg {

width: 30px;

height: 30px;

fill: #ffffff; }

header.mobile .headerInner {

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap; }

header.mobile .headerInner .logo {

-webkit-box-ordinal-group: 1;

-webkit-order: 0;

-ms-flex-order: 0;

order: 0; }

header.mobile .headerInner .menu {

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

width: 100%; }

header.mobile .headerInner .menu .part {

text-align: center; }

header. mobile .headerInner .hamburger {

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

display: block; }

10 CSS Sliding Menus

Коллекция бесплатных HTML и CSS скользящих меню примеров кода.

Меню CSS
Круговые меню CSS
Выпадающие меню CSS
CSS Мобильные меню
Боковые меню CSS
Горизонтальные меню CSS
Полноэкранные меню CSS
CSS Переключить меню
Меню CSS вне холста

Автор

Яго Эстевес
29 сентября 2018 г.

Сделано с

HTML (мопс) / CSS (SCSS) / JS