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

Адаптивное меню важная необходимость для любого сайта, потому что существуют разные размеры мониторов. Многие люди просматривают интернет с помощью мобильных устройств (таких, как iPad, iphone или Android). И очень важно, чтобы на мобильном устройстве было видно всё меню сайта.

Для получения необходимого поведения меню некоторые решения можно найти в интернете с использованием большой библиотекой jQuery или JavaScript. Сегодня мы рассмотрим адаптивное меню с использованием только свойств CSS.

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

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

Посмотрите как это работает:

Демо

к меню ↑

HTML для адаптивного меню

Разметка HTML для адаптивного меню:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
        <meta charset="utf-8" />
        <title>Адаптивное меню</title>
 
        <!-- add styles -->
        <link href="main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container">
            <ul id="nav">
                <li><a href="#">Главная</a></li>
                <li><a href="#s1">Меню 1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">Заголовок a</a>
                            <ul>
                                <li><a href="#">Подменю x</a></li>
                                <li><a href="#">Подменю y</a></li>
                                <li><a href="#">Подменю z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Заголовок b</a>
                            <ul>
                                <li><a href="#">Подменю x</a></li>
                                <li><a href="#">Подменю y</a></li>
                                <li><a href="#">Подменю z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Меню 2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Заголовок c</a>
                            <ul>
                                <li><a href="#">Подменю x</a></li>
                                <li><a href="#">Подменю y</a></li>
                                <li><a href="#">Подменю z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header d</a>
                            <ul>
                                <li><a href="#">Подменю x</a></li>
                                <li><a href="#">Подменю y</a></li>
                                <li><a href="#">Подменю z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Меню 3</a></li>
                <li><a href="#">Меню 4</a></li>
                <li><a href="#">Меню 5</a></li>
                <li><a href="http://htmlhook.ru">Вернуться к статье</a></li>
            </ul>
        </div>
    </body>
</html>
</body>

В заголовке страницы есть метатег name="viewport" — это необходимый элемент для масштабирования содержимого страницы. Больше узнать о метатегах в HTML можно на странице «Метатеги в HTML».

к меню ↑

CSS для адаптивного меню

В самом начале определен базовый стиль для страницы с адаптивным меню:

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #fff;
    height: 100%;
}
body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
}
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}

CSS для горизонтального меню

#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

CSS для вертикального меню

Для того чтобы адаптивное меню на маленьком экране стало вертикальным, нужно использовать «Медиа-запросы», которые определяют свойства CSS для определенных размеров экрана. Для мобильных устройств применяться «Мобильное меню» с применением JavaScript.

Для открытия подуровней меню используется псевдоэлемент :target

/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}