Адаптивное меню на CSS flexbox
Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.
Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно "не париться" по поводу медиа запросов.
На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.
Шапка состоит из трех логичных блоков:
- Блок с логотипом
- Блок с меню, сделанное на списках
- Блок с иконкой и номером телефона
Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.
Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.
Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.
<body>
<header class="header">
<div class="logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<nav class="menu">
<ul>
<li><a href="#">Города</a></li>
<li><a href="#">Замки</a></li>
<li><a href="#">Красоты</a></li>
<li><a href="#">Маршруты</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<div class="phone">
<i class="fa fa-phone-square" aria-hidden="true"></i>
+380973457685
</div>
</header>
</body>
Так будет выглядеть шапка без применения стилей, так и должно быть.
А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.
.header {
display: flex;
}
.header .menu ul {
display: flex;
}
Вот так работает flexbox.
Добавим стили и шапка готова. Дальше нам нужно будет её адаптировать под разные размеры экранов. Обратите внимание, как мало написано кода.
*{
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Open Sans", sans serif;
line-height: 1.5;
}
.header {
border: 2px solid #ccc;
display: flex;
flex-wrap: wrap; /*перенос строки */
justify-content: space-between; /*прижимает содержимое к краям */
align-items: center; /*выравнивает элементы по центру на вертикальной */
}
.header .logo {
padding-left: 30px;
}
.header .menu ul {
display: flex;
list-style: none;
}
.header .menu ul li {
margin: 20px 10px;
}
.header .menu ul a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #06a327;
}
.phone {
font-size: 110%;
color: #333;
padding-right: 40px;
}
Работаем над адаптивностью шапки
Суть процесса по адаптивности сайта заключается в поиске контрольных точек, при которых элементы сайта будут не видны или выглядеть небрежно. Наша задача при сжатии браузера по ширине, увидеть проблему и исправить, дописав соответствующий код (медиа запрос) в файл стилей.
Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.
Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.
@media screen and (max-width: 900px) {
.phone {
margin: auto;
}
}
На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.
Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.
@media screen and (max-width: 500px) {
.header {
flex-direction: column;
}
.header .menu ul {
flex-direction: column;
align-self: center;
}
.header .menu ul li {
margin: 5px;
}
}
Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс "Вёрстка сайта с нуля"
-
Создано 08.03.2018 10:18:00
-
Михаил Русаков
Комментарии (2):
Доброго времени суток Михаил! От себя хочу предложить маленькую поправочку в стили, а именно: в коде CSS с указанием размеров отступов margin: 0; padding: 0; Указывать не просто ноль (0), а дописывать 0px, так как просто ноль не срабатывает.
Ответить
уверяю Вас, что работают оба варианта.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.