Как создать меню в полоску с помощью Flexbox

Как создать меню в полоску с помощью Flexbox

От автора: благодаря flexbox сегодня мы можем с легкостью создавать по-настоящему привлекательные и современные макеты. В этом уроке мы с вами разберем интерфейс, который совсем недавно появился на сайте Google National Parks, а также узнаем, как flexbox поможет нам улучшить его.

И как всегда, перед погружением давайте посмотрим на конечный результат. Посмотрите большую версию, так как эффект виден только на экранах с шириной более 800px:

Наведите курсор мыши на ссылки, чтобы сработал эффект.

Разметка

Сперва давайте разберем разметку, которая будет лежать в основе этого макета. Необходимо создать блок div и поместить в него 5 ссылок. Можно использовать любые подходящие теги. В каждой ссылке должен быть div с классом overlay. Структура кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Базовые стили

С разметкой закончили. Теперь необходимо прописать базовые стили:

Самый внешний div должен быть флекс-контейнером, а его высота должна равняться высоте экрана, т.е. height: 100vh.

Все ссылки должны быть одной ширины (флекс-элементы). Для этого необходимо указать ссылкам свойство flex: 1. Кроме того, у всех ссылок будет фоновое изображение по высоте окна браузера. Также всем ссылкам необходимо задать уникальный цвет фона.

При наведении курсора мыши на ссылку ее размер увеличивается в 3 раза по отношению к остальным ссылкам. Делается это путем изменения значения свойства flex у целевой ссылки. К счастью для нас, это свойство можно анимировать. Мы можем сгенерировать плавный переход (почти во всех современных браузерах).

Часть CSS кода ниже демонстрирует то, что мы только что описали:

Если теперь открыть демо в браузере с поддержкой flexbox, мы увидим:

Стили перекрывающего слоя

Следующим нашим шагом будет написание стилей для перекрывающего слоя. Нам необходимо сделать:

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

Слой наложения необходимо превратить в флекс-контейнер, после чего мы сможем центрировать его прямые дочерние элементы по горизонтали и вертикали (то есть элемент .overlay-inner).

Необходимо добавить перекрывающему слою полупрозрачный серый фоновый цвет при наведении курсора мыши на родительскую ссылку.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Соответствующие стили:

Внутренняя часть перекрывающего слоя

Теперь необходимо стилизовать внутренние части слоя наложения. По умолчанию они скрыты и должны появляться только при наведении курсора мыши на соответствующую родительскую ссылку. Однако происходить это будет не сразу, а с небольшой задержкой. Задержка очень важна. Если ее не задать, плавный переход будет выглядеть немного страшно. Удалите задержку и посмотрите, как изменилось демо, чтобы понять.

Подытожим: сначала ссылка становится больше, и только потом появляется перекрывающий слой. Для создания слайд эффектов мы также использовали свойство translate3d(). Последнее, но не менее важное – для предотвращения эффекта мигания в некоторых браузерах мы использовали хак transform-style: preserve-3d (или что-то похожее). Соответствующие стили:

Добавляем адаптивность

Страница хорошо смотрится на больших экранах, но, пожалуй, на маленьких и даже средних экранах нам придется внести пару изменений. К примеру, нам нужно сделать:

Перевернуть главную ось флекс-контейнера с помощью flex-direction: column, после чего флекс-элементы перестроятся в вертикальное положение.

Отменить все плавные переходы и показывать перекрывающие элементы по умолчанию.

Для настольных ПК медиа запросы будут выглядеть следующим образом. Я использовал только разрешение 800px, так как именно оно используется в демо. Вы можете выбрать любое другое.

Конечный вариант меню:

Поддержка в браузерах

Демо работает во всех современных браузерах с поддержкой flexbox. В некоторых браузерах анимация свойства flex может быть не такой плавной или вообще не работать. К примеру, IE11 не анимирует это свойство, а Edge анимирует. Случай с IE можно понять, так как flexbox еще считается новым режимом макетирования и до сих пор набирает обороты.

Заключение

В этом уроке мы узнали чуть-чуть больше о flexbox, создав стильное меню. Надеюсь, вам понравился наш макет, и вы почерпнете из него что-нибудь в свои следующие проекты! Если будете создавать похожий макет, не забудьте рассказать нам про ваш подход (чистый CSS или JS).

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree