Мобильное меню для сайта на CSS и jQuery
На дворе время мобильных устройств, а значит каждый сайт должен иметь удобную адаптивную версию. Одной из важнейших составляющих адаптивной версии сайта является мобильное меню.
Сейчас мы рассмотрим вариант создания простого и удобного мобильного меню.
Делаем разметку меню:
<div class="mobile_menu_container"> <div class="mobile_menu_content"> <ul> <li> <a href="#" class="parent">Компьютерная техника</a> <ul> <li><a href="#" class="back"></a></li> <li><a href="#">Компьютерная техника</a></li> <li> <a href="#" class="parent">Ноутбуки и аксессуары</a> <ul> <li><a href="#" class="back"></a></li> <li><a href="#">Ноутбуки и аксессуары</a></li> <li><a href="#">Ноутбуки</a></li> <li><a href="#">Аксессуары</a></li> <li> <a href="#" class="parent">Компьютеры и комплектующие</a> <ul> <li><a href="#" class="back"></a></li> <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> <li><a href="#">Видеокарты</a></li> <li><a href="#">Жесткие диски HDD</a></li> <li><a href="#">Корпуса</a></li> </ul> </li> <li><a href="#">Перифирия</a></li> </ul> </li> <li><a href="#">Техника для печати</a></li> <li><a href="#">Микрофоны</a></li> <li><a href="#">Вебкамеры</a></li> <li><a href="#">Наушники</a></li> </ul> </li> <li><a href="#">Строительство и ремонт</a></li> <li> <a href="#" class="parent">Телефоны</a> <ul> <li><a href="#" class="back"></a></li> <li><a href="#">Телефоны</a></li> <li><a href="#">Nokia</a></li> <li><a href="#">Xiaomi</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">iPhone</a></li> </ul> </li> <li> <a href="#" class="parent">Одежда</a> <ul> <li><a href="#" class="back"></a></li> <li><a href="#">Одежда</a></li> <li><a href="#">Брюки</a></li> <li> <a href="#" class="parent">Куртки</a> <ul> <li><a href="#" class="back"></a></li> <li><a href="#">Куртки</a></li> <li><a href="#">Зимние куртки</a></li> <li><a href="#">Летние ветровки</a></li> <li><a href="#">Осенняя коллекция</a></li> </ul> </li> <li><a href="#">Штанишки</a></li> <li><a href="#">Майки</a></li> </ul> </li> <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> </div> </div> <div class="mobile_menu_overlay"></div>
Блок с классом mobile_menu_overlay нужен для создания затемнённой области при активном мобильном меню.
Добавляем так же разметку кнопки, при нажатии на которую будет появляться меню. Вы можете использовать любой элемент, главное добавьте к нему класс mobile_menu, потому что именно на этот класс повешено событие показа мобильного меню.
<div class="menu_container"> <a href="#" class="mobile_menu">Показать меню</a> </div>
Добавляем CSS:
.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.