Мобильное меню для сайта на CSS и jQuery
На дворе время мобильных устройств, а значит каждый сайт должен иметь удобную адаптивную версию. Одной из важнейших составляющих адаптивной версии сайта является мобильное меню.
Сейчас мы рассмотрим вариант создания простого и удобного мобильного меню.
Делаем разметку меню:
Блок с классом mobile_menu_overlay нужен для создания затемнённой области при активном мобильном меню.
Добавляем так же разметку кнопки, при нажатии на которую будет появляться меню. Вы можете использовать любой элемент, главное добавьте к нему класс mobile_menu , потому что именно на этот класс повешено событие показа мобильного меню.
.mobile_menu_overlay, .mobile_menu_container < position: fixed; top: 0; left: 0; width: 100%; height: 100%; >.mobile_menu_container, .mobile_menu_container ul li ul < -webkit-transition: all 200ms; -moz-transition: all 200ms; transition: all 200ms; >.mobile_menu_overlay < display: none; cursor: pointer; z-index: 10200; background: rgba(0, 0, 0, 0.5); >.mobile_menu_container < -webkit-transform: translateX(-300px); transform: translateX(-300px); width: 300px; overflow: hidden; z-index: 10201; background: #3884da; >.mobile_menu_container.loaded < -webkit-transform: translateX(0px); transform: translateX(0px); >.mobile_menu_container .mobile_menu_content < overflow: auto; max-height: 100%; padding-bottom: 30px; >.mobile_menu_container ul < margin: 0; padding: 0; >.mobile_menu_container ul li < list-style: none; >.mobile_menu_container ul li a < display: block; padding: 15px 20px; line-height: 20px; font-size: 16px; background: #3884da; color: #ffffff; text-decoration: none; font-weight: bold; >.mobile_menu_container ul li a.parent < padding-right: 50px; background: #3884da url("images/arrow_right.svg") right 20px center no-repeat; background-size: 20px; >.mobile_menu_container ul li a.parent:hover < background: #3c8de8 url("images/arrow_right.svg") right 20px center no-repeat; background-size: 20px; >.mobile_menu_container ul li a.back < padding-left: 50px; background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat; background-size: 20px; box-sizing: border-box; min-height: 50px; >.mobile_menu_container ul li a.back:hover < background: #3c8de8 url("images/arrow_left.svg") left 20px center no-repeat; background-size: 20px; >.mobile_menu_container ul li a:hover < background: #3c8de8; >.mobile_menu_container ul li ul < -webkit-transform: translateX(300px); transform: translateX(300px); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #3884da; z-index: 2; >.mobile_menu_container ul li ul.loaded < -webkit-transform: translateX(0px); transform: translateX(0px); >.mobile_menu_container ul li ul.activity < overflow-y: auto; overflow-x: hidden; >@media (max-width: 320px) < .mobile_menu_container< width: 240px; >>
И немножко скриптов с использованием jQuery:
$(function() < $(document).on("click", ".mobile_menu_container .parent", function(e) < e.preventDefault(); $(".mobile_menu_container .activity").removeClass("activity"); $(this).siblings("ul").addClass("loaded").addClass("activity"); >); $(document).on(«click», «.mobile_menu_container .back», function(e) < e.preventDefault(); $(".mobile_menu_container .activity").removeClass("activity"); $(this).parent().parent().removeClass("loaded"); $(this).parent().parent().parent().parent().addClass("activity"); >); $(document).on(«click», «.mobile_menu», function(e) < e.preventDefault(); $(".mobile_menu_container").addClass("loaded"); $(".mobile_menu_overlay").fadeIn(); >); $(document).on(«click», «.mobile_menu_overlay», function(e) < $(".mobile_menu_container").removeClass("loaded"); $(this).fadeOut(function() < $(".mobile_menu_container .loaded").removeClass("loaded"); $(".mobile_menu_container .activity").removeClass("activity"); >); >); >)
Вот и всё! Мы получили простое и качественное мобильное меню.
Для битриксоидов в исходники закинул готовый шаблон компонента bitrix:menu .
Выезжающее мобильное меню Jquery+HTML+CSS
В этой статье разберем процесс создания мобильного меню с плавным выездом слева из-за границы окна на Jquery, JS, CSS и HTML. Меню будет адаптивно, то есть будет возможность применить его и в версии для ПК и планшетов. Ширину для ПК установим примерно в 30% от ширины экрана.
Как создать кнопку «hamburder» на чистом CSS и варианты ее кастомизации можно посмотреть в отдельной статье. Готовая кнопка «гамбургер» для бокового меню на CSS и SCSS.
Мы же перейдем сразу к созданию мобильного бокового меню. Сначала опишем структуру блока на HTML.
В контейнере mobile-menu размещаем фон затемнения экрана и основной контейнер меню. В контейнере меню сделаем шапку, в которую, например, можно поместить логотип компании и крестик для закрытия окна. Получается окно будет закрывать и нажатие на крестик и нажатие на фон.
.mobile-menu < display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; >@media (min-width: 768px) < .mobile-menu < padding-top: 0; >> .mobile-menu .mm__bg < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(20, 20, 20, 0.8); z-index: 100; >.mobile-menu .mm__wrapper < visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: all .4s ease-in-out; overflow-y: auto; position: relative; width: 100%; height: 100%; z-index: 200; touch-action: auto; -ms-touch-action: auto; background: #fff; >@media (min-width: 768px) < .mobile-menu .mm__wrapper < width: 35%; >> @media (min-width: 1200px) < .mobile-menu .mm__wrapper < width: 25%; >> .mobile-menu .h__logo < padding-left: 40px; font-size: 2rem; font-weight: 700; color: #333; line-height: 1.25; margin-left: 20px; margin-top: 15px; >.mm__header .close-btn
Кстати говоря, крестик закрытия окна сделаем тоже на чистом CSS. Для этого нам надо нарисовать из двух блоков + и повернуть его на 45 градусов.
.close-btn < position: relative; width: 20px; height: 20px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); cursor: pointer; >.close-btn:before < width: 2px; height: 18px; left: 8px; top: 0; >.close-btn:after < height: 2px; width: 18px; top: 8px; left: 0; >.close-btn:before, .close-btn:after < content: ""; background: #000; position: absolute; >.close-btn--red:before, .close-btn--red:after
Теперь собственно скрипт открытия на jquery.
$(document).ready(function () < //мобильное меню $('#mobile-menu-btn').click( function(event)< event.preventDefault(); $('#mobile-menu').fadeIn(); $('#mm__wrapper') .css('visibility', 'visible') .css('transform', 'translateX(0)'); $("body").css("overflow","hidden"); >); //закрытие мобильного меню $('.mm__close').click( function()< $('#mobile-menu').fadeOut(); $('#mm__wrapper') .css('visibility', 'hidden') .css('transform', 'translateX(-100%)'); $("body").css("overflow","auto"); >); >);
Рабочий код «Выезжающее мобильное меню Jquery+HTML+CSS»
Смотреть Pen Glass by VectorDev (@VectorDEV) на CodePen.
Как сделать — Меню мобильной навигации
Узнать, как создать главное меню навигации для смартфонов/планшетов с помощью CSS и JavaScript.
Мобильная панель навигации
Вертикальное (рекомендуемый):
Создание мобильного меню навигации
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Стиль меню навигации */
.topnav overflow: hidden;
background-color: #333;
position: relative;
>
/* Скрыть ссылки внутри меню навигации ( кроме главной/логотип) */
.topnav #myLinks display: none;
>
/* Ссылки меню навигации по стилю */
.topnav a color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
>
/* Стиль меню гамбургера */
.topnav a.icon background: black;
display: block;
position: absolute;
right: 0;
top: 0;
>
/* Добавить серый цвет фона при наведении курсора мыши */
.topnav a:hover background-color: #ddd;
color: black;
>
/* Стиль активной ссылки (или главная/логотип) */
.active background-color: #4CAF50;
color: white;
>
Шаг 3) Добавить JavaScript:
Пример
/* Переключение между отображением и скрытием ссылок меню навигации, когда пользователь нажимает на значок меню/панели гамбургеров */
function myFunction() var x = document.getElementById(«myLinks»);
if (x.style.display === «block») x.style.display = «none»;
> else x.style.display = «block»;
>
>
Совет: Чтобы создать отзывчивую панель навигации, которая работает на всех устройствах, прочитайте наш учебник Как сделать — Отзывчивая верхняя навигация.
Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигационных панелях.