Меню как на портале Президента России

Создать открывающееся меню с боку, как в новой версии портала «Президента России», используя только свойства CSS. Для этого достаточно применить псевдоселектор :checked, а для эффекта плавно открывающегося меню добавить свойство CSS3 transition. Открывающееся меню без проблем работает в браузерах IE9+, Firefox 3.5+, Chrome, Safari 3.2+, Opera 9.5+.

Оглавление:
  1. Открывающееся меню
  2. CSS для пунктов меню
  3. CSS для обертки
  4. CSS для триггера
  5. CSS для label
  6. Заставить триггер работать
  7. Заключение

Открывающееся меню

Существует много плагинов jQuery, которые позволяют создать такой эффект, но, на самом деле его довольно легко сделать без библиотеки JavaScript.

Демо

Внимательно посмотрите на демонстрацию, меню состоит из четырёх основных элементов:

  • menu-top — горизонтальное меню
  • menu-off — открывающееся меню
  • checkbox — тип элемента
  • label — изображение для элемента input

Содержание обернуто внутри элемента div с классом wrap.

Основная структура HTML выглядит так:

<ul class="menu-top">
  <li class="nav-link"><a href="#">Ссылка</a></li>
  <li class="nav-link"><a href="#">Ссылка</a></li>
</ul>
<ul class="menu-off">
  <li class="nav-item"><a href="#">Ссылка</a></li>
  <li class="nav-item"><a href="#">Ссылка</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrap">
    <!— содержание —>
</div>
к меню ↑

CSS для пунктов меню

Горизонтальное меню всегда открыто и постоянно находится на переднем плане вверху страницы. Даже если пользователь прокручивает страницу вниз горизонтальное и открывающееся меню остается на месте.

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

.menu-top {
  height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  list-style: none;
  background: #051945;
  z-index: 2;
}
.nav-link {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 300px;
  display: inline-block;
  height: 60px;
  line-height: 60px;
}

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

CSS для открывающегося меню:

.menu-off {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  background: #020C22;
}
.nav-item {
  width: 200px;
  position: relative;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
}

Цвета фона, границы, градиенты можно добавить на свой вкус или в сочетании с цветовым оформлением сайта.

к меню ↑

CSS для обертки

.wrap {
  min-height: 100%;
  min-width: 100%;
  background-color: white;
  position: relative;
  top: 60px;
  bottom: 100%;
  left: 0;
  z-index: 1;
  padding: 4em;
}
к меню ↑

CSS для триггера

Для триггера в CSS мы изменим стандартный ввод (флажок) на классический значок, о котором мы все знаем, его еще называют “гамбургер”.

Прячем стандартный флажок:

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
к меню ↑

CSS для label

label[for="nav-trigger"] {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
}

Присмотритесь в код, для значка определено фиксированное положение, значит значок “гамбургер” будет всегда виден в горизонтальном меню, даже когда скрыто открывающееся меню.

Теперь добавим сам значок, в качестве фона изображения значка в CSS используется SVG, для фона можно применить изображение .PNG или jpeg.

label[for="nav-trigger"] {
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 2;
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1′ x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30′ enable-background='new 0 0 30 30′ xml:space='preserve'><rect fill='white' width='30' height='6'/><rect fill='white' y='24' width='30' height='6'/><rect y='12' fill='white' width='30' height='6'/></svg>");
  background-size: contain;
}
к меню ↑

Заставить триггер работать

Это последние и основные куплеты CSS, именно эти свойства предназначены для открытия и закрытия меню.

.nav-trigger + label, .wrap {
  transition: left 0.2s;
}
.nav-trigger:checked + label {
  left: 245px;
}
.nav-trigger:checked ~ .wrap {
  left: 230px;
}

Пояснение кода:

Первая строка имеет свойство transition со значением left 0.2s — это скорость с которой будет открываться и закрываться меню и отодвигать в право обертку.

Вторая строка селектор :checked после нажатия на значок “гамбургер” он отодвигается вправо на 245px.

В третей строке триггер имеет важное значение, используется одноуровневый селектор ~ , целью которого для обертки изменить значение с left: 0px на 230px и при повторном нажатии на значок вернуть значение для обертки left: 0px.

И последнее: для тела HTML документа нужно скрыть любые переполнения по оси x. Без этого, когда меню открыто появится скроллер и пользователи смогут прокручивать окно влево и вправо.

body {
    overflow-x: hidden;
}
к меню ↑

Заключение

сайт htmlhook.ru не имеет никакого отношения к политике, цель этой статьи как и всех остальных помочь веб-разработчикам использовать инновационные веб-технологии для содержания страниц.