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

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

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

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

Представленные ниже на DEMO примеры для меню прошли проверку на корректность отображения и адаптивность в основных браузерах. Есть некоторая погрешность всего в 1-2 px для некоторых не значительных элементов в горизонтальном меню при просмотре через браузер IE, но это можно подправить, либо вовсе проигнорировать.

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

В первом примере я покажу, как можно сделать адаптивное горизонтальное меню применяя только css.

СУЖАЙТЕ браузер по ГОРИЗОНТАЛИ.

Выбрать положение меню

Результат CSS и HTML.

<style>

* {

box-sizing: border-box;

}

body {

margin: .75em;

padding: 0;

-webkit-animation: bugfix infinite 1s;

}

@-webkit-keyframes bugfix {

from {

padding: 0;

}

to {

padding: 0;

}

nav[role="custom-dropdown"] {

margin: 0;

padding: 0;

position: relative;

width: 100%;

}

nav input[type=checkbox] {

position: absolute;

top: -9999px;

left: -9999px;

}

nav label {

display: none;

cursor: pointer;

user-select: none;

}

nav[role="custom-dropdown"]:before, nav[role="custom-dropdown"]:after {

animation-play-state: paused !important;

}

nav[role="custom-dropdown"] a, nav[role="custom-dropdown"] label {

color: #ccc;

text-decoration: none;

font: 1.4em sans-serif;

transition: color .3s ease-in-out;

}

nav[role="custom-dropdown"] ul {

margin: 0 auto;

padding: 0;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start;

-webkit-align-content: flex-start;

-ms-flex-line-pack: start;

align-content: flex-start;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

width: 100%;

list-style: none;

background-color: #414141;

}

nav[role="custom-dropdown"] ul > li {

-webkit-order: 0;

-ms-flex-order: 0;

order: 0;

-webkit-flex: 0 1 auto;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

-webkit-align-self: auto;

-ms-flex-item-align: auto;

align-self: auto;

padding: 10px 25px;

width: auto;

text-align: center;

transition-duration: .4s;

transition-timing-function: ease-in-out;

transition-property: box-shadow, color;

border-right: 1px solid black;

cursor: pointer;

background-image: url(https://raw.github.com/TimPietrusky/mantisbt-is-a-rockstar/master/rockstar/img/bg_dark_grey.png);

}

nav[role="custom-dropdown"] ul > li:first-child{ border-left: 1px solid black; }

nav[role="custom-dropdown"] ul > li:hover {

background-color: rgba(0, 0, 0, .85);

color: #fff;

box-shadow: inset 0 0 0 2em rgba(0, 0, 0, .9);

}

nav[role="custom-dropdown"] ul > li > a {

color: #fff;

}

@media screen and (max-width: 700px){

.adapt_menu{

margin: 0;

}

nav[role="custom-dropdown"] ul {

display: none;

height: 100%;

}

nav[role="custom-dropdown"] label {

position: relative;

display: block;

width: auto;

min-height: 2.25em;

padding: 0;

font-size: 1.1em;

margin: 0;

border: .15em solid rgba(60, 60, 60, .2);

background-image: url(https://raw.github.com/TimPietrusky/mantisbt-is-a-rockstar/master/rockstar/img/bg_dark_grey.png);

}

nav[role="custom-dropdown"] label:after {

position: absolute;

right: .25em;

top: 0;

content: "\2261";

font-size: 1.8em;

}

nav[role="custom-dropdown"] input[type="checkbox"]:checked ~ label:after {

color: #fff;

}

nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul {

display: block;

}

nav[role="custom-dropdown"] input[type="checkbox"]:checked ~ ul > li {

width: 100%;

opacity: .8;

text-align: left;

}

nav[role="custom-dropdown"] input[type="checkbox"]:checked ~ ul > li::after {

position: absolute;

right: .25em;

content: "\203A";

font: bold 1.4em sans-serif;

}

</style>

<li><a href="#">Главная</a></li>

<li><a href="#">Категория</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</nav>

Очень внимательно!
Выбрав расположение меню ( слева, по центру или справа ), скопируйте код css и html и вставьте к себе на страницу html.

Вот этот код @media screen and (max-width: 700px)... и отвечает за схлопывание ( адаптацию ) меню, где на маленьких устройствах горизонтальная часть меню посредством css скрывается, и в этот же момент становится видимым навигационное меню, которое в полном объёме умещается на мобильном экране пользователя.
Здесь каждый пропишет своё количество пикселей.

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

Этот вариант меню так же адаптирован и выполнен на css без использования js скриптов подойдет тем, у кого на сайте присутствует огромное количество категорий и пунктов меню, и без многоуровневого меню просто не обойтись.

СУЖАЙТЕ браузер по ГОРИЗОНТАЛИ

Выбрать положение меню

Результат CSS.

.dws-menu > ul {

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

Будьте внимательны!
Выбрав расположение многоуровневого меню ( слева, по центру или справа ), скопируйте кусок кода css и замените его на аналогичный в файле style.css ( на архив ссылка ниже ).

Скачать горизонтальное многоуровневое адаптивное меню на css

Ссылка на файл: скачать архив

Горизонтальное адаптивное меню на JS.

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ

Демо

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

Скачать горизонтальное адаптивное меню на JS

Ссылка на файл: скачать архив

Многоуровневое адаптивное меню на JS.

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ

Демо

Схлопывание меню здесь регулируется как в CSS ( описание в предыдущих примерах ), так и в скрипте, строка: var mediasize = 800;.
Для нужного местоположения меню, - копируете полученный код и заменяете им исходный у себя.

Скачать многоуровневое адаптивное меню на JS

Ссылка на файл: скачать архив