alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Адаптивное меню на CSS

Категория: Адаптивная верстка Просмотров: 7342 Коментариев: 0 Дата: 2017-02-12 Добавил: admin

 Адаптивное меню

Всем Привет! Сегодня, в этой статье, попытаюсь Вам рассказать о таком блоке, без которого не может обойтись практически ни один сайт. Таким блоком является меню, а именно, так как раздел у нас про адаптивную верстку то соответственно создаваться будет адаптивное меню. Адаптивное меню при отображении на малых устройствах будет приобретать вертикальный удобный читаемый вид, а при отображении на больших экранах будет иметь уже привычный горизонтальный вид.

И так, для начала создадим HTML разметку, в которой будет div блок с классом container, у которого указана максимальная ширина и задано расположение по центру. Внутри блока div есть тег <nav> </nav>, в котором и будет расположено наше меню.

HTML
<!DOCTYPE html>
<html lang="en">
<head>

                
  
</head>
<body>


</body>
</html>

HTML разметка готова, приступим к оформлению таблицы стилей CSS нашего меню.

CSS

                

                

Для эффектов в меню, при наведении на наше меню, добавляем в стили следующие строки.

CSS
/*эфекты при наведении мыши на пункты меню*/
.nav li a:hover{
        color:#fff;/*меняется цвет ссылок*/
        background:#ABABAB;/*меняется цвет фона под ссылкой*/
}

Теперь зададим стили для мобильного меню. Особо долго думать не будем, поэтому пропишем такие же стили, как и для меню на больших экранах.

CSS
/*стили для мобильного меню такие же, как и для общего меню*/
/*общий фон для нашего меню*/
#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 будет отображаться мобильное меню, но при этом будет исчезать меню для больших экранов.

CSS
/*медиа-запрос*/
@media(max-width:768px){
        .nav{
                display:none;/*скрываем меню для больших экранов*/
        }
        #mobil-menu{
                display:block;/*показываем мобильное меню*/
        }
}

И теперь, если мы возьмем правый нижний угол браузера и будем его сжимать до середины экрана то когда размер браузера станет 768px у нас появится надпись Мобильное меню. При нажатии на которое ничего не происходит. Для того что бы исправить это, нужно вставить Jquery код который и будет разворачивать и сворачивать наше меню. Сначала подключаем Jqueryбиблиотеку

Jquery
<script src="http://Ваш сайт/js/ jquery-1.11.2.min.js"> </script>

После того как подключили библиотеку Jquery вставляем ниже написанный код.

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>

Теперь после всех стараний при нажатии на ссылку Мобильное меню у нас выкатывается вниз меню. По виду оно у нас пока немного страшное, но сейчас мы его оформим и приведем в нужный вид. В медиа-запрос который уже создан выше, допишем следующие стили и в результате получим следующую картину.

CSS
/*медиа-запрос*/
@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;
    }

}

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


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов