Любой IT-продукт, будь то программа или веб-сайт невозможны без элементов управления и/или навигации. Появление, в последнее время, мобильных устройств обладающих доступом к интернету, задает новые требования веб-сайтам. Одно из них – адаптация веб-страниц к разным разрешениям дисплеев. И так на одном из моих сайтов мне понадобилось создать многоуровневое меню, да и еще адаптивное под мобильные устройства. Проанализировав содержимое глобальной сети я нашел неплохое решение, которым и поделюсь сегодня. И так данное меню изменяет свое расположение в зависимости от размера (разрешения) экрана. Его можно использовать как для настольных компьютеров, так для планшетов и мобильных устройств.
Первое с чего мы начнем это HTML код. Он будет состоять из ненумерованных списков и подсписков.
Там где классы <i class="fa fa-bars"> мы добавим к этому меню некоторые интересные иконки, используя иконочный шрифт (масштабируемые векторные иконки) и CSS-инструменты.
Добавьте данную строку между тегами <head> </head>
Второе – зададим CSS стили для первого уровня меню использующегося только для настольных компьютеров. Обратите внимание на параметр display: block для класса .menu он используется при изменении размера окна браузера. А также применим некоторые эффекты для плавных цветовых переходов для кнопок.
nav{
background: #3E4156;
}
nav i.fa,nav ul i.fa{
margin-right: 5px;
}
.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;}
Следующая часть CSS кода отвечает за скрытие и отображение меню 2-го уровня, когда пользователь наводит курсор на пункт меню 1-го уровня.
/* спрятать меню второго уровня */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 41px;
left: 0px;
background: #ffffff;
}
/* отобразить меню 2-го уровня при наведении курсора мыши */
.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:#eeeeee;}
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
/* И наконец, стили для пунктов меню 3-го уровня. */
/* изменть позиции меню 3-го уровня */
.menu ul ul {left: 149px;
top: 0px;
}
Для мобильной версии мы будем использовать простую ссылку, которая действует как кнопка. Мы будем раскрывать меню, когда размер окна браузера меньше 767px.
Menu
Уникальный идентификатор будет использоваться для кода JavaScript.
Ниже показаны свойства кнопки 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;
}
В медиа запросах для мобильных версий мы будем показывать кнопку и изменять свойства меню, что бы это выглядело как выпадающий список меню.
@media (max-width: 767px) {
.menu{display:none;}
.mobile-menu{display:block;
/*margin-top:100px;*/}
nav{margin:0;
background:none;}
ul.menu{
margin: 0;
padding: 0;
}
.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;}
/* ширину уровней 2 и 3 делаем такой-же как для всех пунктов */
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}
.menu ul ul {left:0;padding-left: 10px;}
}/*end media queries*/
И наконец, JAVASCRIPT код
Этот код выполнится только для мобильной версии. При нажатии на кнопку меню появляется эффект скольжения. Если окно браузера изменяется, становясь более чем 767px, то мы удалим свойства стиля меню inlain и внешний вид меню, примет вид как в версии по умолчанию.
<script type="text/javascript">
$(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>
На этом все, скопировав данный код себе в нужные файлы, вы получите прекрасное отзывчивое многоуровневое меню.
Также ниже можно просмотреть демо версию данного меню или скачать исходник.
CSS