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

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

Оглавление
  1. Адаптивное меню
  2. HTML для адаптивного меню
  3. CSS для адаптивного меню

Для получения необходимого поведения меню некоторые решения можно найти в интернете с использованием большой библиотекой 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="https://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;
    }
}