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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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

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