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

Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.

Как известно у iPhone событие click срабатывает только у элементов, у которых есть cursor:pointer. Поэтому для закрытия меню по клику в не его области, к <body> добавляется класс body_pointer.

HTML-вёрстка

<div class="menu">
	<a class="menu-triger" href="#"></a>
	<div class="menu-popup">
		<a class="menu-close" href="#"></a>
		<ul>
			<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>
		</ul>						
	</div>
</div>
HTML

Стили:

.menu-triger {
	display: block;
	width: 25px;
	height: 17px;	
	background: url(https://snipp.ru/demo/449/menu.png) 0 0 repeat;
	position: absolute;
	left: 15px;
	top: 28px;
}	
.menu-close {
	display: block;
	width: 28px;
	height: 28px;	
	background: url(https://snipp.ru/demo/449/close.png) 0 0 repeat;
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 100;
}
.menu-popup {
	display: none;	
	background: #2c2e3e;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0;
	padding: 30px;
	z-index: 9999;	
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.menu-popup ul {
	margin: 0;
	padding: 0;
}
.menu-popup li {
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.menu-popup li a {
	font-size: 18px;
	font-family: "Arial";
	color: rgb(255, 255, 255);
	line-height: 1.4;	
	text-decoration: none;
}
.body_pointer * {
	cursor: pointer;
}
CSS

JQuery:

$(function() {
	var $menu_popup = $('.menu-popup');
	
	$(".menu-triger, .menu-close").click(function(){
		$menu_popup.slideToggle(300, function(){
			if ($menu_popup.is(':hidden')) {
				$('body').removeClass('body_pointer');
			} else {
				$('body').addClass('body_pointer');
			}					
		});  
		return false;
	});			
	
	$(document).on('click', function(e){
		if (!$(e.target).closest('.menu').length){
			$('body').removeClass('body_pointer');
			$menu_popup.slideUp(300);
		}
	});
});
JS

В действии:

27.08.2019 112

Поделится

Другие публикации

Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...
Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.