Всем Привет! Сегодня, в этой статье, попытаюсь Вам рассказать о таком блоке, без которого не может обойтись практически ни один сайт. Таким блоком является меню, а именно, так как раздел у нас про адаптивную верстку то соответственно создаваться будет адаптивное меню. Адаптивное меню при отображении на малых устройствах будет приобретать вертикальный удобный читаемый вид, а при отображении на больших экранах будет иметь уже привычный горизонтальный вид.
И так, для начала создадим HTML разметку, в которой будет div блок с классом container, у которого указана максимальная ширина и задано расположение по центру. Внутри блока div есть тег <nav> </nav>, в котором и будет расположено наше меню.
<!DOCTYPE html> <html lang="en"> <head>
</head> <body>
</body> </html>
HTML разметка готова, приступим к оформлению таблицы стилей CSS нашего меню.
Для эффектов в меню, при наведении на наше меню, добавляем в стили следующие строки.
/*эфекты при наведении мыши на пункты меню*/
.nav li a:hover{
color:#fff;/*меняется цвет ссылок*/
background:#ABABAB;/*меняется цвет фона под ссылкой*/
}
Теперь зададим стили для мобильного меню. Особо долго думать не будем, поэтому пропишем такие же стили, как и для меню на больших экранах.
/*стили для мобильного меню такие же, как и для общего меню*/
/*общий фон для нашего меню*/
#mobil-menu{
background: #CECECE;
}
#mobil-menu{
/*вместо display: block; ставим display: none;*/
display: none;/*скрываем мобильное меню на больших экранах*/
padding: 20px 25px;/*отступы*/
font-weight: 900;/*жирный шрифт*/
font-size: 16px;/*размер шрифта*/
color: blue;/*цвет ссылок*/
text-decoration:none;/*убираем подчеркивание ссылок*/
}
#mobil-menu:hover{
color:#fff;
background:#ABABAB;
}
С меню для больших экранов мы закончили и смело можем приступать к менюшке на малых экранах. Для этого, нам понадобится медиа-запрос, в котором укажем, что при максимальном экране 768px будет отображаться мобильное меню, но при этом будет исчезать меню для больших экранов.
/*медиа-запрос*/
@media(max-width:768px){
.nav{
display:none;/*скрываем меню для больших экранов*/
}
#mobil-menu{
display:block;/*показываем мобильное меню*/
}
}
И теперь, если мы возьмем правый нижний угол браузера и будем его сжимать до середины экрана то когда размер браузера станет 768px у нас появится надпись Мобильное меню. При нажатии на которое ничего не происходит. Для того что бы исправить это, нужно вставить Jquery код который и будет разворачивать и сворачивать наше меню. Сначала подключаем Jqueryбиблиотеку
<script src="http://Ваш сайт/js/ jquery-1.11.2.min.js"> </script>
После того как подключили библиотеку Jquery вставляем ниже написанный код.
<script type="text/javascript">
$(document).ready(function(){
var touch = $('#mobil-menu');
var menu = $('.nav');
$(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>
Теперь после всех стараний при нажатии на ссылку Мобильное меню у нас выкатывается вниз меню. По виду оно у нас пока немного страшное, но сейчас мы его оформим и приведем в нужный вид. В медиа-запрос который уже создан выше, допишем следующие стили и в результате получим следующую картину.
/*медиа-запрос*/
@media (max-width:768px){
#mobil-menu{
display:block;/*показываем мобильное меню*/
}
.nav{
display:none;/*скрываем меню для больших экранов*/
margin: 0;/*обнуляем отступы*/
padding: 0;/*обнуляем отступы*/
background: #F5F5F5;
}
.nav li{
display: block;/**/
}
/*сами стили для ссылок*/
.nav li a{
/*background: #cecece;*/
color:blue;
border-top: 1px solid #bebebe;/*рамка сверху*/
border-left: 3px solid transparent;/*прозрачная рамка слева*/
}
/*для первого элемента li убираем рамку сверху*/
.nav li:first-child а{
border-top: none; /*отменяем рамку*/
}
/*стили, используемые при наведении на мобильное меню*/
.nav li a:hover{
color:#333;
background:#ebebeb;
border-left: 3px solid #515572;
}
}
После того, как вы использовали весь код предоставленный выше, у Вас должно получится все как в демо-версии. Предоставленный код выше можно модифицировать под любые вкусы и задачи, получив уже то меню, которое будет подходить под Ваш дизайн. На этом, с простым адаптивным меню завершим.
CSS