Адаптивное мобильное меню для сайта — ВебКлиент - заказать сайт в Тамбове
город: Тамбов
тел: +7 999 621 90 62
e-mail: moskwin68@mail.ru

Адаптивное мобильное меню для сайта

HTML

<div class="parent_block">
 <div class="menu-icon">
   <img src="/<!--путь_до_иконки-->/menu.svg" />
 </div>
 <!--Раскрывающийся блок содержащий пункты меню-->
 <div class="toggled_block">
  <nav>
   <a href="#">Главная</a>
   <a href="#">Проекты</a>
   <a href="#">Услуги</a>
   <a href="#">Цены</a>
   <a href="#">Блог</a>
  </nav>
 </div>
</div>

CSS

.parent_block {
  width: 200px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  right: 0;
}
.toggled_block {
  display: none;
  height: 50px;
  background: #300;
  z-index: 3;
}
.toggled_block nav a {
  width: 100%;
  float: left;
  clear: both;
  text-align: left;
}
@media all and (min-width: 650px) {
 .parent_block {
   display: none;
 }
}

JavaScript

$(".menu-icon").click(function() {
 $('.toggled_block').toggle();
});
$(document).on('click', function(e) {
 if (!$(e.target).closest(".parent_block").length) {
  $('.toggled_block').hide();
 }
 e.stopPropagation();
});
// Скрываем блок при скролле
$(document).bind('scroll',function (e) {
 var container = $(".toggled_block");
 if (container.has(e.target).length === 0){
  container.hide();
 }
});