Содержание страницы
Age-Dragon.com
Главная / Элементы html и css / Адаптивное горизонтальное меню

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

адаптивное горизонтальное менюВ наше время для сайта всё чаще становится актуальным воплощение адаптивного горизонтального меню, это то меню, которое на мобильных устройствах будет схлопываться и принимать удобный для навигации вид. Чтобы внедрить адаптивное горизонтальное меню на странице, достаточно применить навыки в 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>


<nav class="my_nav" role="custom-dropdown">

<input type="checkbox" id="button">

<label for="button" onclick></label>

<ul class="myulsp">

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

<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 ( на архив ссылка ниже ).

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

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


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

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

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

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

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


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

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

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

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

Ссылка на файл: скачать архив
Комментарии
smsДобавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!