HTML

В первую очередь добавим мета-тег viewport внутри тега head.Этот мета-тег viewport требуется для нашей страницы, чтобы правильно изменять масштаб на экране любого размера, особенно в mobile viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

И затем добавим следующий фрагмент кода как навигационную разметку внутри тега body.

<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">How-to</a></li>
        <li><a href="#">Icons</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Web 2.0</a></li>
        <li><a href="#">Tools</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

Как вы можете видеть выше, есть шесть основных ссылок меню и еще одна ссылка добавлена после них. Эта дополнительная ссылка будет использована, чтобы вытянуть навигационное меню, когда оно спрятано на маленьком экране.

Дальнейшее чтение: Не забывайте о мета-таге viewport.

Стили

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

body {
    background-color: #ece8e5;
}

Тег nav, который определяет навигацию, будет 100% полной ширины в окне браузера, в то время как ul, в котором он содержит наши основные ссылки меню, будет 600px в ширину.

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}

Затем мы применим свойство float влево к ссылкам меню, чтобы они были расположены горизонтально в ряд, но применение этого свойства к элементу вызовет схлопывание родительского элемента.

nav li {
    display: inline;
    float: left;
}

Если Вы заметили из разметки html выше, мы уже добавили clearfix в свойство class для nav и ul, чтобы расчистить место, когда мы разместим “плавающие” элементы внутри него, используя CSS clearfix hack. Итак, добавим следующие правила стилей в таблицу стилей.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Так как у нас шесть ссылок меню и мы так же назначили контейнеру ширину 600px, каждая ссылка меню будет шириной 100px.

nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}

Ссылки меню будут разделены правой границей толщиной 1px, кроме последней. Помня о блочной модели из прошлого урока, ширина ссылки меню будет увеличена на 1px из-за добавления границы, что сделает ее 101px, так что здесь мы изменим модель box-sizing на border-box, чтобы сохранить ширину ссылки меню 100px.

nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}

Далее, у меню будет более яркий цвет, когда оно в состоянии :hover или :active.

nav a:hover, nav a:active {
    background-color: #8c99a4;
}

И, наконец, дополнительна ссылка будет спрятана для экрана компьютера.

nav a#pull {
    display: none;
}

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

Дальнейшее чтение: CSS3 Box-sizing

Media Queries

CSS3 media queries используется для определения того, как стили будут меняться в определенных точках или для конкретных размеров экрана.

Так как наш блок навигации изначально фиксированной ширины 600px, мы сначала определим стили для просмотра на экране размером 600px или меньше, т.е., практически это наша первая точка.

При этом размере экрана каждая пара ссылок будут располагаться в ряд, так что ширина ul здесь будет 100% ширины окна браузера, тогда как ширина ссылок меню будет 50%.

@media screen and (max-width: 600px) { 
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

И после этого мы также определим, как отображается блок навигации, когда экран становится 480px или меньше, так что это наша вторая точка.

При этом размере экрана дополнительная ссылка, которую мы добавили ранее, станет видимой, и также мы добавим ссылке иконку «Меню» справа, используя :after pseudo-element , тогда как ссылки главного меню будут спрятана, чтобы сохранить больше вертикального пространства на экране.

@media only screen and (max-width : 480px) { 
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        rightright: 15px;
        top: 10px;
    }
}

Наконец, когда экран становится 320px или меньше, меню будет показано вертикально сверху вниз.

@media only screen and (max-width : 320px) { 
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

Теперь вы можете попробовать изменить размер окна браузера. Теперь он должен адаптироваться под размер экрана.

Дальнейшее чтение: Media Queries для стандартных устройств

Вывод меню

На данном этапе меню будет все еще спрятанным и будет видимым только тогда, когда оно нужно, после касания или нажатия на ссылку «Меню», и мы можем достичь этого эффекта, используя jQuery slideToggle().

$(function() {
    var pull        = $('#pull');
        menu        = $('nav ul');
        menuHeight  = menu.height();
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
});

Тем не менее, когда Вы меняете размер окна на маленьком экране сразу после того, как вы посмотрели и спрятали меню, меню будет спрятано, так как стиль display: none, сгенерированный jQuery, все еще применяется к элементу.

Так что нам нужно удалить этот стиль при изменении размера окна следующим образом:

$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
});

Все, это весь код, который нам нужен, теперь мы можем посмотреть блок навигации по следующим ссылкам, и рекомендуем протестировать его инструментом для проверки адаптивности дизайна, таким как the Responsinator, чтобы Вы могли увидеть разные варианты его ширины одновременно.

Демо – Скачать исходный код

Бонус: альтернативный способ

Как было ранее упомянуто в уроке, есть и другие способы сделать это, и использование JavaScript библиотеки SelectNav.js – один из простейших путей. Это чистый JavaScript, который не зависит от других сторонних библиотек, таких как jQuery.

В принципе, это будет дублировать Ваш список меню и трансформировать его в <select> выпадающее меню, после чего Вы сможете выбрать посредством media queries, что будет скрыто и показано, в зависимости от размеров экрана.

Одно из преимуществ этого способа – то, что нам не нужно беспокоиться о стилях навигационного блока, так как меню <select> будет использовать стандартный пользовательский интерфейс самого устройства.

Пожалуйста, обратитесь к официальной документации для дальнейшей реализации.

Заключение

Мы прошли весь путь создания адаптивной навигации с нуля. То, что мы создали, — только один из примеров, и как было заявлено и показано ранее, Вы можете реализовать множество других решений. И Вам решать, какой способ выбрать, чтобы он наиболее подходил для удовлетворения требований и навигационной структуры Вашего сайта.

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• 20 CSS-уроков для адаптивного веб-дизайна
• Создаем адаптивный css-таймлайн c 3d эффектом
• Адаптивное Retina-меню
• Adobe исследует будущее адаптивных макетов

Комментарии