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

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

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

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

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

Разметка

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

<div class="flex-wrapper">
  <a href="" class="one">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #1</h2>
        <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p>
      </div>
    </div>
  </a>
   
  <!—еще 4 ссылки -->
</div>

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

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

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

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

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

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

.flex-wrapper {
  display: flex;
  height: 100vh;
}
 
.flex-wrapper a {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex .4s;
}
 
.flex-wrapper .one {
  background-image: url(IMAGE_PATH);
  background-color: red;
}
 
.flex-wrapper a:hover {
  flex: 3;
}

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

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

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

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

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

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

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

.flex-wrapper .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}
 
.flex-wrapper a:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

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

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

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

.flex-wrapper .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}
 
.flex-wrapper .overlay h2 {
  transform: translate3d(0, -60px, 0);
}
 
.flex-wrapper .overlay p {
  transform: translate3d(0, 60px, 0);
}
 
.flex-wrapper a:hover .overlay-inner * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: all .3s .3s;
}

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

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

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

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

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

@media screen and (max-width: 800px) {
  .flex-wrapper {
    flex-direction: column;
  }
   
  .flex-wrapper a:hover {
    flex: 1;
  }
   
  .flex-wrapper a:hover .overlay {
    background-color: transparent;
  }
   
  .flex-wrapper .overlay h2,
  .flex-wrapper .overlay p {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

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

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

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

Заключение

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

Автор: George Martsoukos

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree