Адаптивное много-уровневое меню
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css - со шрифтами-иконками
HTML
Меню представляет из себя неупорядоченный список:
<nav>
<ul class="menu">
<li>
<a href="#"><i class="icon-home"></i>Главная</a>
<ul class="sub-menu">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li>
<a href="#"><i class="icon-user"></i>О нас</a>
</li>
<li>
<a href="#"><i class="icon-camera"></i>Портфолио</a>
<ul class="sub-menu">
<li>
<a href="#">Подменю 1</a>
</li>
<li>
<a href="#">Уровень 3 меню</a>
<ul>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
<li><a href="#">Подменю 6</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-bullhorn"></i>Блог</a>
</li>
<li>
<a href="#"><i class="icon-envelope-alt"></i>Контакты</a>
</li>
</ul>
</nav>Для добавления иконок, нужно просто добавить соответствующий иконке класс к тегу i - например, icon-home, icon-camera и т.п.
CSS
Посмотрим на CSS для десктопного меню первого уровня:
.menu{
display:block;
}
.menu li{
display: inline-block;
position: relative;
z-index:100;
}
.menu li a {
font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;
-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:#ffffff;
background:#9CA3DA;
}Мы будем скрывать меню второго уровня и раскрывать его, когда пользователь наведет курсор на элемент меню первого уровня.
/* скрываем меню второго уровеня */
.menu ul {
display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
/* показываем меню второго уровня при наведении */
.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 #9CA3DA;
color:#797979;
}Меню третьего уровня будет иметь такие же свойства, как и у меню второго уровня, за исключением позиционирования:
/* Изменение позиций для меню третьего уровня */
.menu ul ul {
left: 149px;
top: 0px;
}Теперь добавим адаптивности, и рассмотрим из чего строится мобильная версия меню.
При уменьшении размера окна менее, чем 760px у нас меню заменится кнопкой-ссылкой, которая в десктопной версии скрыта.
<a id="touch-menu" class="mobile-menu" href="#">
<i class="icon-reorder"></i>
Меню
</a>Уникальный идентификатор touch-menu будем использовать в jаvascript коде, для обращения к меню.
Ниже css свойства для кнопки Меню:
.mobile-menu{
display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{
background:#3E4156;
color:#ffffff;
text-decoration:none;
}Ниже свойства CSS для мобильной версии меню.
@media (max-width: 760px) {
.menu{display:none;}
.mobile-menu{
display:block;
margin-top:100px;
}
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*/JS
Подключаем jQuery и файл с кодом для мобильной версии:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/jаvascript" ></script>
<script src="js/menu.js" type="text/jаvascript"></script>
Ниже приведено содержимое файла menu.js - код используемый в мобильной версии.
При нажатии на кнопку-ссылку Меню с эффектом slide появляется вся наша навигация вместе с выпадающими подпунктами.
$(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 > 760 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});Если размер окна браузера более 760px, то мы удаляем инлайновые свойства у .menu и внешний вид навигации вернется к десктопному варианту.
