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

В данной заметке рассматривается процесс создания адаптивного горизонтального меню для сайта. Для того, чтобы интегрировать его на сайт, предварительно следует подключить библиотеку jquery и «иконочный» шрифт font awesome на сайт.

Заметка разбита на 3 части: HTML, CSS и JS. Пример полностью рабочий и апробирован в нескольких проектах, в т.ч. есть успешный опыт интеграции данного меню в шаблон opencart (в связке с php), где пункты меню добавляются автоматом при появлении их в БД сайта.

1. HTML-разметка

Для начала создается базовая html-разметка (по количеству нужных пунктов, уровней вложенности etc):

<nav>
<a id="touch-menu" class="mobile-menu" href="#">
   <i class="fa fa-bars" aria-hidden="true"></i>Меню
</a>
  <ul class="menu">
	<li><a  href="#">Пункт 1</a>
		<ul class="sub-menu">
			<li><a href="#">Пункт 1.1</a></li>
			<li><a href="#">Пункт 1.2</a>
				<ul>
					<li><a href="#">Пункт 1.2.1</a></li> 
					<li><a href="#">Пункт 1.2.2</a></li>
					<li><a href="#">Пункт 1.2.3</a></li>
					<li><a href="#">Пункт 1.2.4</a></li>
					<li><a href="#">Пункт 1.2.5</a></li>
				</ul>
			</li>
		</ul>
	</li>
  <li><a  href="#">Пункт 2</a></li>
  <li><a  href="#">Пункт 3</a></li>
  <li><a  href="#">Пункт 4</a></li>
  </ul>
</nav>

На данном этапе сложностей возникнуть не должно. Простые html-списки и иконки там, где это необходимо. Верхняя ссылка с id=»touch-menu» понадобится нам позднее для мобильной версии меню.

2. CSS стили

Тут все тоже должно быть понятно. Адаптивность достигается за счет верстки на @media-запросах. Управление выпадающими блоками меню происходит на основе псевдокласса :hover (т.е. по наведению мыши/нажатием на блок на тачскрине). Остальные атрибуты отвечают за графическое представление меню и их, естественно, можно менять по своему желанию.

/*Адаптивное меню*/
.menu{display:block; background-color: #ffffff; }
 
.menu li{display: inline-block;
position: relative;
z-index:100;
padding: 0 10rem 0 0;
}
 
.menu li a {
font-family: 'Montserrat', sans-serif ;

text-decoration:none;
padding:11px;
display:block;
color:black;
 
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}
 
.menu li a:hover, .menu li:hover > a{color:black;
background:#ffffff;}

/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
 
/* display second level menu on hover */
.menu li:hover > ul{ display: block;}
 
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
 
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}
 
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #ffffff;
color:#797979;
}

.menu ul ul {left: 149px;
	top: 0px;
}

/* change level 3 menu positions */
.menu ul ul {left: 149px;
	top: 0px;
}


.mobile-menu{display:none;
width:100%;
padding:11px;
background:#231f20;
color:#ffffff !important;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#231f20;
color:#ffffff;
text-decoration:none;
}
@media (max-width: 768px) {
.menu li{
padding: 0 6.5rem 0 0;
}

}

@media (max-width: 767px) {
 
.menu{display:none;}
 
.mobile-menu{display:block;
margin-top:20px;}
 
nav{margin:0;
background:none;}
 
.menu li{display:block;
margin:0;}
 
.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}
 
.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;}
 
/*level 2 and 3 - make same width as all items*/
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}
 
.menu ul ul {left:0;}
 
}/*end media queries*/

 

3. Немного JS

Приведенный ниже js-код активируется только в мобильной «версии» сайта, т.е. когда ширина экрана < 767 пикселей. Кнопка типа «гамбургер» и надпись «меню» становятся активными и при клике на эти элементы меню раскрывается выпадающим списком. До этого момента, соответственно, меню убрано под кат.

<script>
$(document).ready(function(){ 
	var touch 	= $('#touch-menu');
	var menu 	= $('.menu');
 
	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
	
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
	
});

</script>

Наверное, на этом моменте стоит завершать данную заметку. Да, конечно, в ней мало внимания уделено тому, какой элемент за что отвечает, но, с другой стороны, это довольно простой вариант меню для сайта. По крайней мере, человеку, более-менее знакомому с основами веб-разработки, не составит труда разобраться, что к чему.