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

Создать открывающееся меню с боку, как в новой версии портала «Президента России», используя только свойства 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. Заключение

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

Открывающееся меню с боку после нажатия на значок
Создать открывающееся меню с боку

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

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

Демо

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

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

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

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

<svg style="display: none">
  <symbol id="menu-checked" viewBox="0 0 16 16">
    <path fill="#fff" d="M1 3h14v3h-14zM1 7h14v3h-14zM1 11h14v3h-14z"></path>
  </symbol>
</svg>

<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">
 <svg>
   <use xlink:href="#menu-checked"></use>
 </svg>
</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

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

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

label svg {
  height: 30px;
  width: 30px;
}
К началу

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

Это последние и основные куплеты 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.

Чтобы не появилась горизонтальная прокрутка, когда боковое меню открыто, нужно скрыть переполнения по оси x.

body {
  overflow-x: hidden;
}

Мозила не снимает флажок с input при обновлении страницы, это известный баг. Поэтому нужен скрипт-костыль, который снимет флажок.

JavaScript

document.getElementById('nav-trigger').checked = false; // для firefox
К началу

Заключение

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