Многие адаптивные сайты используют горизонтальное меню на больших экранах и выпадающие меню — на маленьких. Сегодня мы попробуем сделать адаптивное меню (не без помощи JavaScript), которое изменяется в зависимости от ширины экрана.

Смотрите демо

Какое решение лучше?

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

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

Шаг 1: Выбор контрольных точек

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

Вот пример использования media queries

@media only screen and (max-width: 480px) {
    /* This CSS will be applied only to phones and other small devices. */
} 

Twitter Bootstrap использует несколько опорных точек, включая смартфоны с шириной не более 480px.
На самом деле, media queries не указывают, какое устройство мы будем использовать, зато они применяются для различных разрешений экранов.

Шаг 2: Пишем разметку

Давайте построим простую страницу. Мы будем использовать тег “article”, чтобы поместить туда нашу навигацию и контент.

<article>
    <nav>
        <ul class="navbar" id="mainNavbar">
            <li><a href="/">Home</a></li>
            <li><a href="/products.html">Products</a></li>
            <!-- More nav items... -->
            <li><a href="/contact.html">Contact</a></li>
        </ul>
    </nav>
    <p>Here is our content.</p>
</article>
<aside>
    <p>Here is a side note about our content.</p>
</aside>

Шаг 3: Основные стили

Для начала, давайте немного украсим наше меню.

navbar {
    background-color: #055;
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 1;
    overflow: hidden;
}
.navbar li, .navbar a {
    display: inline-block;
}
.navbar li {
    list-style-type: none;
}
.navbar > li {
    margin-left: .25em;
}
.navbar > li:first-child {
    margin-left: 0;
}
.navbar a {
    padding: .25em;
    text-decoration: none;
    height: 1em;
    font-weight: bold;
    color: #fff;
}
.navbar a:hover {
    background-color: #088;
}

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

body {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
}
article {
    background-color: #eee;
    padding: 2.5%;
    margin-right: 1%;
    width: 64%;
    float:left;
}
aside {
    background-color: #ccc;
    padding: 2.5%;
    width: 25%;
    float: left;
}

Теперь мы имеем такой результат:

Шаг 4: Добавляем опорные точки

На маленьких экранах текст разрывается, и его становится сложно читать. Мы можем исправить это, убрав обтекание, изменив ширину блоков, таким образом разместив сайдбар под основным контентом (тег article)

@media only screen and (max-width: 550px) {
    aside, article {
        width: 95%;
        float: none;
    }
    article {
        margin-right: 0;
        margin-bottom: 1em;
    }
}

Не бойтесь экпирементировать с размером ширины.

Шаг 5: Устанавливаем фиксированную высоту для навигации.

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

При помощи JavaScript мы будем скрывать элементы, которые не вписываются. Мы покажем их в выпадающем меню позже. Если пользователь не использует JavaScript, мы просто заставим высоту панели навигации расширяются по мере необходимости. Это не красиво, но это по крайней мере функционально.

Чтобы сделать это, мы скачаем и подключим пользовательские сборки Modernizr, библиотеку JavaScript, которая позволяет нам протестировать функцию поддержки в браузерах. Также мы добавим класс  «no-js».

<html class="no-js">
<script src="modernizr.custom.js"></script>

Теперь давайте добавим следующий класс:

.js .navbar {
    height: 1.5em;
    overflow: hidden;
}

Шаг 6: Подключаем FlexMenu

Скачайте flexMenu, jQuery-плагин  и подключите  jQuery. Чтобы все нормально работало, размещайте скрипты внизу страницы.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>

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

<script type="text/javascript">
    $('#mainNavbar').flexMenu();
</script>

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

Шаг 7: Добавляем стили flexMenu

Теперь давайте немного украсим нашу менюшку и добавим треугольники-указатели к выпадающим пунктам.

.flexMenu-popup {
    padding: 0;
    background-color: #088;
    margin: 0;
}
.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {
    background-color: #5599AA;
}
.flexMenu-viewMore > a:after {
    display: inline-block;
    content:"";
    border-left:0.3em solid transparent;
    border-right:0.3em solid transparent;
    border-top:0.4em solid white;
    margin-left:0.4em;
    position: relative;
    top: -.1em;
}
.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
    background-color: #088;
}
.flexMenu-popup > li > a, .flexMenu-popup > li {
    display: block;
}
.flexMenu-popup > li > a:hover {
    background-color: #3aa;
}

Шаг 8: настройки для сенсорных экранов

Теперь у нас есть панель инструментов, которая хорошо работает на разнообразных размерах экранов, но ее немного трудно использовать на сенсорном экране. Чтобы решить эту проблему, давайте сделаем ссылки немного больше, и переместите их немного дальше друг от друга.

Modernizr, который мы добавили ранее, предоставляет CSS класс для каждой функции, которую она проверяет. На устройствах с сенсорными экранами, он будет добавлять класс «touch». На устройствах без сенсорного экрана, он будет добавлен класс «no-touch».

.touch .navbar {
    font-size: 1.25em;
}

Шаг 9: Наша любимая часть работы

Для закрепления результата нам осталось немного повозиться со старым осликом.

Давайте подключим следующие стили для IE ниже 8-ой версии:

<!--[if lt IE 8]>     <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]> <!-->  <html lang="en-us" class="no-js"> <!--<![endif]-->

Теперь давайте добавим сами стили

.lt-ie8 .flexMenu-popup {
    margin-top: -1px
}
.lt-ie8 article {
    width: 600px;
}
.lt-ie8 aside {
    width: 200px;
}
.lt-ie8 body {
    width: 901px;
}

Ура, наша адаптивная менюшка готова!

Смотрите демо

Автор: webdesign.tutsplus

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