Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

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

Напомню, что первыми шаблонами, рассмотренными в этой серии статей, стали те, в которых меню оставалось в заголовке страницы независимо от размеров страницы.

Вторыми были модели навигационных панелей, которые сдвигали меню в подвал. Кроме этого мы разработали еще четыре схемы, которые позволяют посетителям быстрее «добраться» к навигационному меню. В обоих случаях целью являлась экономия вертикального пространства на маленьких экранах.

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

Шаблоны

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

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

Вот список шаблонов для этого урока:

  • Шаблон «Переключение» — меню открывается по клику кнопкой и закрывается по клику в любом месте вне меню;
  • Шаблон «Мульти переключения» — добавляет подменю-гармошку к основному шаблону;
  • Шаблон «Переключения и скольжение» — подменю выезжает слайдом из-за пределов экрана.

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

Полностью код всех шаблонов доступен для скачивания здесь, а также в каждом демонстрационном режиме с помощью функции «Просмотреть исходный код». В самом уроке я буду отображать только специфические части кода, касающиеся разрабатываемых шаблонов:

57058_d01007e44f88cb2cf82997028c2514bb.png

Шаблон «Переключение»

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

Введение: На самых маленьких экранах будет отображаться только кнопка включения меню. Далее мы стилизуем вертикально расположенное меню и по умолчанию скроем его. Как только появится достаточно пространства, мы с помощью медиа-запросов сменим вертикальную ориентацию меню на горизонтальную, и переместим его вверх страницы.

Шаг 1: HTML

В первой статье этой серии я описал псевдо-селектор :target, как один из способов генерации события при помощи CSS-стилей. Селектор :target сравнивает хеш в URL - адресе и id элемента. Другими словами, если у вас есть адрес domain.com#more, то селектор :target будет искать элемент с id="more".

В данном случае мы используем другое CSS событие, описанное как хак чекбокса. Работает оно путем создания элемента формы label, который подключен к чекбоксу. Label будет кнопкой меню, и, нажимая на него, мы отметим или снимем флажок с чекбоска. Можно также использовать вариант скрытия меню, основываясь на состоянии свойства :checked.

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

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

<label class="btn" for="toggle" onclick>Меню</label>
<input id="toggle" type="checkbox" />

 <nav>
  <ul id="nav">
    <li><a href="">Назад к записи</a></li>
    <li class="current"><a href="toggle.html">Включить меню</a></li>
    <li><a href="multi-toggle.html">Мультифункциональный переключатель</a></li>
    <li><a href="toggle-slide.html">Переключить &amp; слайдом</a></li>
    <li id="close"><label for="toggle">Закрыть</label></li>
  </ul>
</nav>

Прежде чем перейти к CSS, позвольте мне объяснить, как все это будет работать. Чтобы посмотреть демонстрационный режим, вам нужно уменьшить размер окна браузера до 600 пикселей. При размерах меньше этих вы увидите только кнопку меню вверху страницы.

При нажатии на кнопку откроется меню в виде гармошки. Когда меню открыто, можете нажать в любом месте экрана, чтобы его закрыть. На саму кнопку нажимать не нужно. Также заметьте, что когда меню закрыто, кнопка меняет цвет при наведении на нее указателя мыши, но не делает этого, когда меню открыто.

Все это происходит благодаря тому, что для нескольких элементов установлены различные значения z-index. Когда меню открыто – оно находится над кнопкой. То, что вы не видите – и есть label, закрывающий меню. Этот label невидим и растягивается, чтобы стать больше, чем видимые границы экрана. Он находится над всеми остальными элементами меню.

Когда меню открыто, мы видим четыре ссылки. И сразу позади них скрытый label, который снимает галочку и выключает панель навигации. Эта метка должна быть поверх всех элементов страницы, за исключением четырех пунктов меню. И если вы наводите мышью поверх кнопки, когда меню открыто, то вы наводите мышью на метку закрытия меню.

Также обратите внимание на значения z-index, когда будете читать код.

Шаг 2: CSS - стили

Начнем с позиционирования label (.btn) в правом верхнем углу страницы. Присвоим значение z-index 100. После этого зададим отступы для кнопки, сгладим ее углы, и затем зададим цвета текста и фона.

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

Заметка: Я использую устаревшую версию синтаксиса градиента, поскольку на момент написания статьи свежие версии Webkit еще поддерживались браузерами.

Этот синтаксис должен работать и в тех браузерах, которые поддерживают новую спецификацию:

.btn {
  position: absolute;
  top: 1.25em;
  right: 5%;
  z-index: 100;
  padding: 0.25em 2%;
  color: #fff;
  border-radius: 0.25em;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image:    -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image:     -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image:      -o-linear-gradient(top, #6b6766, #5b5756);
  background-image:         linear-gradient(top, #6b6766, #5b5756);
}

.btn:hover {
  background-color: #7b7776;
  background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
  background-image:    -moz-linear-gradient(top, #8b8786, #7b7776);
  background-image:     -ms-linear-gradient(top, #8b8786, #7b7776);
  background-image:      -o-linear-gradient(top, #8b8786, #7b7776);
  background-image:         linear-gradient(top, #8b8786, #7b7776);
}

Когда нам не нужен чекбокс, то позиционируем его далеко за пределами страницы. Прежде чем вынести чекбокс за пределы, стоит проверить его работоспособность, кликнув по кнопке и по ярлыку #close. После этого смело убирайте чекбокс и можете забыть о нем:

#toggle {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

В части, относящейся к меню, начнем с его позиционирования. Поместим панель под шапкой страницы. Значение z-index зададим меньше, чем для кнопки. Когда меню отображается как закрытое, нам нужно, чтобы кнопка была поверх всей панели, потому что она открывает меню.

Панель навигации скрывается путем установки свойств height и line-height для ссылок в списке, со значением равным 0 и установкой свойств overflow со значением hidden. Если не установить переполнение ссылок, мы увидим их размещенными друг на друге.

Эффект гармошки получается в результате изменения высоты и высоты строки через промежутки времени:

#nav {
  position: absolute;
  top: 5em;
  left: 0;
  z-index: 10;
  width: 100%;
  list-style: none;
  text-align: left;
}

#nav a {
  height: 0;
  line-height: 0;
  display: block;
  border-bottom-width: 0;
  background: #444;
  padding: 0 0 0 5%;
  overflow: hidden;
  color:#fff;
  text-decoration: none;

  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}
57058_ca999cb0f02f360d292f74b42279bfd8.png

Шаг 3: CSS – стили для включения меню

И снова мы используем «хитрость» с чекбоксом, для скрытия и разворачивания меню. #toggle – это наш чекбокс, и мы применим хак для элемента nav. Это позволит нам использовать CSS внутри nav.

В первую очередь мы изменим значение z-index меню так, чтобы оно оказалось поверх кнопки. Значение 101 вполне подойдет. Затем мы зададим тень для меню, чтобы было ясно, что оно находится вверху страницы. Тень останется, когда меню будет скрыто:

#toggle:checked ~ nav #nav {
  z-index: 101;
  -webkit-box-shadow: 0px 3px 10px 3px #777;
     -moz-box-shadow: 0px 3px 10px 3px #777;
      -ms-box-shadow: 0px 3px 10px 3px #777;
       -o-box-shadow: 0px 3px 10px 3px #777;
          box-shadow: 0px 3px 10px 3px #777;
}

Затем мы раскроем меню, через свойства height и line-height у ссылок, установив их равными 3em. Снова переход будет осуществлен в виде гармошки. Обратите внимание, что у ссылок значение z-index равно 1. У самой панели навигации оно равно 101, но внутри меню ссылки имеют z-index равный 1.

Это важная деталь. Почему именно – вы поймете из кода ниже. У ссылки #close z-index равен 0, что позволяет держать ее сзади всех других ссылок. Для скрытия и растягивания метки #close мы сделали ее фон прозрачным, а значения свойств top и bottom отрицательными.

Цифры совершенно случайны и зависят от вашего дизайна:

#toggle:checked ~ nav #nav a {
  line-height: 3em;
  height: 3em;
  border-bottom: 1px solid #999;
  position: relative;
  z-index: 1;

#toggle:checked ~ nav #nav a:hover {
  background: #555;
}

#toggle:checked ~ nav #nav #close {
  position: relative;
  z-index: 0;
}

#toggle:checked ~ nav #nav #close label {
  background: transparent;
  border-bottom: 0;
  position: absolute;
  top: -101em;
  bottom: -101em;
  left: 0;
  right: 0;
  z-index: 0;
}

На данный момент меню должно работать. Его можно переключить, нажав на кнопку, и скрыть, нажав мышью за пределами видимого меню:

57058_9c4d965f9458a2be1e97ffbadecc3e3f.png

Шаг 4: CSS – стили для медиа - запросов

Нам осталось сменить вертикальное размещение панели навигации на горизонтальное, когда появится достаточно места. При ширине страницы в 48em у нас появляется нужное пространство. Сначала мы прячем кнопку меню, установив свойство display в значение none. Затем мы настраиваем позицию меню и выключаем тень.

Нам стоит сделать это для состояний как включенного, так и выключенного меню, потому что пользователь может изменить размер экрана путем поворота планшета:

@media screen and (min-width: 48em) {
  .btn {display: none;}

  #toggle:checked ~ nav #nav,
  #nav {
    top: 2em;
    right: 2%;
    left: 35%;
    -webkit-box-shadow: 0;
       -moz-box-shadow: 0;
        -ms-box-shadow: 0;
         -o-box-shadow: 0;
            box-shadow: 0;
}

Для отображения ссылок в горизонтальной плоскости мы задаем списку свойство display со значением inline. Затем выравниваем с помощью свойства float со значением left. Затем мы сбрасываем свойства height и line-height у ссылок, чтобы отображать их в строку; выравниваем с помощью свойства float со значением right, и задаем небольшие отступы.

И, наконец, для метки close задаем свойство display: none, так как в данный момент она нам не нужна:

#nav li {
  display: inline;
  float: left;
}

#nav li.current a {
 color: #7b7776;
}

#nav a {
  line-height: 1em;
  height: 1em;
  display: inline;
  float: right;
  background: transparent;
  padding: 0 1.15em;
  border-bottom: 0
}

#nav #close {
  display: none;
}

При значениях ширины выше этого значения нужно лишь настроить отступы.

Шаг 5:Настройка для iOS и Android

Выше я упомянул, что необходима некоторая «подстройка» шаблона под iOS ниже шестой версии. Для Android версий ниже 4.1.2. нам также необходимо это сделать. Для обоих случаев есть простые, но необычные, исправления.

Исправление для iOS мы уже видели. Оно заключается в добавлении пустого события onclick для label. Для Android мы добавляем ложную анимацию у элемента body:

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

На этом работа с переключающимся меню закончена.

Мысли

Переключаемый шаблон популярен потому, что он отлично выполняет свою функцию. Он сохраняет вертикальное пространство, используя его только для кнопки. Главная задача CSS – стилизовать видимые кнопку и меню. А ключевая задача шаблона – включать и выключать меню.

В этом случае я использовал «хитрость» с чекбоксом, но вы также можете использовать хак для :target, который был описан в первой статье из этой серии. Также можете использовать классы Javascript, чтобы скрывать и показывать навигационную панель. Ранее я описывал вариант реализации с помощью библиотеки jQuery.

Шаблон «Мульти – переключения»

Этот шаблон похож на предыдущий, за исключением одного момента. Мы можем добавлять в каждый пункт меню – подменю. На некоторых сайтах, использующих этот шаблон, подменю сделаны видимыми, когда открыто основное меню. Подменю стилизованы иначе, поэтому и нельзя сразу понять, что это часть главного меню. В нашем случае мы будем скрывать элементы подменю, пока они не востребованы.

Подход: Начнем с того, что создадим такое же меню, как в предыдущем шаблоне. Один из пунктов меню (ссылка «мульти – переключение») будет содержать подменю. Этот пункт по умолчанию будет свернут. Мы добавим к этой ссылке индикатор, используя библиотеку jQuery. Он будет использоваться для открытия-закрытия ссылок меню в виде гармошки:

57058_429fa68aa293b575af9499abc03154e6.png

Шаг 1: HTML

Html-разметка очень похожа на предыдущий шаблон, за исключением пары дополнений: подменю в ссылке Multi-Toggle и классы, присвоенные ссылке (содержащей подменю) и самому подменю:

<label class="btn" for="toggle" onclick> Меню </label>
<input id="toggle" type="checkbox" />

<nav>
  <ul id="nav">
    <li><a href="">Назад к записи</a></li>
    <li><a href="toggle.html"> Переключатель </a></li>
    <li class="current"><a href="multi-toggle.html" class="containts-sub multi">Мульти переключатель </a>
      <ul class="submenu">
        <li><a href="multi-toggle.html"> Ссылка 1 мульти - переключателя </a></li>
        <li><a href="multi-toggle.html"> Ссылка 2 мульти - переключателя </a></li>
        <li><a href="multi-toggle.html"> Ссылка 3 мульти - переключателя </a></li>
      </ul>
    </li>
    <li><a href="toggle-slide.html"> Слайд - переключатель </a></li>
    <li id="close"><label for="toggle">Закрыть</label></li>
  </ul>
</nav>

Переключение главного и подменю реализовано так же, как и в первом шаблоне.

Шаг 2: CSS – стили для подменю

Прежде всего, уведомим наших посетителей, что нажатие на ссылку «Мульти-переключатель» сделает что-то еще, кроме того, что переместит их на другую страницу. Для этого мы добавим направленный вниз треугольник. Сделаем это простым способом. Добавим содержимому псевдо-элемента свойство :after и используем символ Юникод для отображения треугольника.

Так как треугольник великоват, то уменьшим значение его свойства font-size:

.multi:after {
  content: " \0025Bc";
  font-size: 0.5em;
}

Мы будем использовать ту же технику (настройки свойств height и line-height у ссылок), чтобы меню раскрывалось в виде гармошки. Будем держать подменю закрытым, установив свойства height и line-height у ссылок и списка равными 0, и еще раз добавив переход.

Чтобы было легче отличить пункты подменю, мы выделим их, добавив отступы и более светлый фон:

#toggle:checked ~ nav #nav .submenu li,
#toggle:checked ~ nav #nav .submenu a {
  height: 0;
  line-height: 0;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

#toggle:checked ~ nav #nav .submenu a {
  padding-left: 7%;
  background: #555;
}

Отобразить подменю как открытое нам снова поможет увеличение значений свойств height и line-height для ссылок и списка. Заметьте, что селектор здесь содержит дополнительный класс open. Следующий шаг – добавление и удаление этого класса с помощью jQuery:

#toggle:checked ~ nav #nav .submenu.open li,
#toggle:checked ~ nav #nav .submenu.open a {
  height: 3em;
  line-height: 3em;
}
57058_e438c1bf2d8085b3d8e45628613ccc5b.png

Шаг 3: Код jQuery для открытия и закрытия подменю

Сначала нужно подключить библиотеку jQuery. Я приведу пример, как сделать это через Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Нам понадобится всего одна функция для добавления и удаления класса. Сначала мы возьмем любую ссылку с помощью класса .contains-sub и создадим функцию для щелчка кнопкой мыши, чтобы изменить изначальное поведение ссылки.

Подменю «родственно» этой ссылке, потому мы находим «родственный» элемент списка и тестируем, есть ли у него класс open. Если класса еще нет – добавляем его. Остальные действия предоставим CSS-стилям:

$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
    return false;
  });
});
57058_bf073abcb587c18f447319b8bd90db7a.png

Шаг 4: Медиа-запросы

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

Дополнительно мы реализуем удаление треугольника в псевдо контенте :after:

.multi:after {
  content: "";
}

CSS-стили для добавления подменю у нас уже есть. По умолчанию нам не нужно показывать под меню, поэтому мы перемещаем его за пределы экрана. После события hover мы возвращаем подменю обратно путем смены значения свойства left на auto и изменения значения свойства top на меньшее.

Заметка: IE6 поддерживает событие :hover только для ссылок. Поэтому, если вам нужна поддержка IE6, используйте класс sfhover и небольшой Javascript-код из набора ниспадающих меню Suckerfish drop down system. IE7 поддерживает событие :hover для элементов, не являющихся ссылками, при условии использования верного типа документа (doctype).

Большая часть остального кода служит «для красоты». Устанавливаем цвет фона, границ, устанавливаем ширину и отступы. Затем нужно сбросить свойства height и line-height для ссылок в подменю. У них были значения, отличные от 0, когда флажок был отмечен.

Также я отключил переходы для подменю в этом шаблоне. В нашем случае получается множество движущихся частей, что далеко не лучший вариант.

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

#nav .submenu {
  position: absolute;
  left: -999em;
}

#nav li:hover .submenu {
  left: auto;
  top: 1.05em;
  background: #2b2726;
  max-width: 14em;
}

#nav li:hover .submenu li {
  border-bottom: 1px solid #999;
}

#nav li:hover .submenu a {
  height: 3em;
  line-height: 3em;
  color: #eae8db;
  background: #2b2726;
  padding-right: 1.75em;
  width: 14em;
  -webkit-transition: 0;
     -moz-transition: 0;
      -ms-transition: 0;
       -o-transition: 0;
          transition: 0;
}

#nav li:hover .submenu a:hover {color: #7b7776;}

Меню и подменю настроено для широких экранов. Остается настроить только отступы для них.

Мысли

Все, что было сказано относительно шаблона с переключаемым меню, касается и мульти – переключаемого меню. Оно экономит вертикальное пространство, пока это необходимо. Расширяется в зависимости от количества подменю. Главное, что нужно решить относительно подменю, это будет ли оно открыто все время, либо же будет открываться по команде.

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

Шаблон «Переключения и скольжения»

Этот шаблон в точности повторяет предыдущий, за исключением того, как именно мы скрываем и показываем подменю.
Введение: Мы переместим подменю в новый элемент меню и, как во втором шаблоне, скроем его по умолчанию. И вместо складывания гармошкой будем использовать эффект слайда.

Шаг 1: HTML

Html – разметка очень похожа на разметку предыдущего шаблона. Но есть некоторые отличия. Мы переместили подменю на ссылку «Слайд-переключатель» и переименовали один из классов подменю из multi в slide. Отмечу, что классы slide и contains-sub перемещены в подменю.

В нем появилась новая ссылка. И, так как наше подменю будет выезжать из-за экрана, нам нужно реализовать обратное действие:

<label class="btn" for="toggle" onclick>Меню </label>
<input id="toggle" type="checkbox" />

<nav>
  <ul id="nav">
    <li><a href="">Назад к записи</a></li>
    <li><a href="toggle.html" class="accordion multi">Переключатель</a></li>
    <li><a href="multi-toggle.html">Мульти – переключатель</a></li>
    <li class="current"><a href="toggle-slide.html">Слайд-переключатель</a>
      <ul class="submenu" class="contains-sub slide">
        <li><a href="toggle-slide.html" id="back" class="contains-sub">Назад</a></li>
        <li><a href="toggle-slide.html"> Ссылка 1 слайд - переключателя </a></li>
        <li><a href="toggle-slide.html"> Ссылка 2 слайд - переключателя </a></li>
        <li><a href="toggle-slide.html"> Ссылка 3 слайд - переключателя</a></li>
      </ul>
    </li>
    <li id="close"><label for="toggle">Закрыть</label></li>
  </ul>
</nav>
57058_f39549346b56c2332bb177ce1d238431.png

Шаг 2: CSS – стиль для подменю

Теперь нам необходимо внести изменения в CSS. Сначала мы изменим индикатор и воспользуемся треугольником, указывающим направление, в котором будет сдвигаться подменю:

.slide:after {
  content: " \0025B6";
  font-size: 0.5em;
}

Для того чтобы сделать слайд меню «выезжающим» из-за экрана, мы должны сначала расположить его там. Установим для меню абсолютное позиционирование и свойству left зададим значение -100%. Затем добавим переход появления подменю:

.submenu {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  -webkit-transition: 0.75s;
     -moz-transition: 0.75s;
      -ms-transition: 0.75s;
       -o-transition: 0.75s;
          transition: 0.75s;
}

Добавим класс .open, чтобы показать подменю. Все что останется сделать – задать свойству left значение auto. Затем сменим фон ссылок подменю, чтобы переход выглядел более наглядно. Сейчас мы скрыли меню, но нам нужно иметь возможность нажать на ссылку «Назад».

Поэтому мы зададим псевдо-элементу значение указывающего влево треугольника:

.submenu.open {
  left: 0;
}

.submenu.open a {
  background: #555;
}

#back:before {
  content: " \0025C0";
  font-size: 0.5em;
}
57058_868d1f924b6806b45867b3cfb3d65f7c

Шаг 3: Код jQuery для отображения и скрытия подменю

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

В html – код мы добавили ссылку "Назад", которую и будем использовать для скрытия подменю. Можно применить ту же функцию jQuery. В исходном коде мы искали родственный элемент ссылки, которая имела класс contains-sub. В случае со ссылкой «Назад» этого делать не придется:

$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
    return false;
  });

  $('ul.submenu a.contains-sub').click(function() {
    if($(this).offsetParent('ul').hasClass('open')){
      $(this).offsetParent('ul').removeClass('open');
    } else {
      $(this).offsetParent('ul').addClass('open');
    }
    return false;
  });
});

Вместо этого нам нужно взять родительский ul ссылки и убрать класс open. На самом деле нам не нужно включать дополнительный код для добавления класса, потому что ссылка «Назад» будет отображена лишь в том случае, если класс уже есть. И нам не нужно включать код для удаления класса remove, так как нам это нужно только тогда, когда класса не существует при нажатии оригинальной ссылки.

Для этого конкретного примера, код jQuery выглядит так:

$(document).ready(function() {
  $('a.contains-sub').click(function() {
    $(this).siblings('ul').addClass('open');
    return false;
  });

  $('ul.submenu a.contains-sub').click(function() {
    $(this).offsetParent('ul').removeClass('open');
    return false;
  });
});
57058_d7b373bbb6c315d73e324a782858f283

Шаг 4: Медиа-запросы

Код медиа-запросов для переключения и шаблона слайда в основном идентичен. Мы скрываем переключатель и стрелку в ссылке, конвертируем вертикальное меню в горизонтальное с «выпадением» вниз. Вместо всего кода, я покажу лишь несколько важных различий.

Во-первых, было добавлено отрицательное значение margin для последней ссылки, чтобы сместить ее немного влево. Более важное изменение заключается в том, что должен осуществляться обратный переход подменю. Так как этот переход был осуществлен в виде выезда подменю из-за экрана, теперь его нужно убрать.

Ссылка "Назад" нам не нужна, поэтому мы скроем ее с помощью свойства display: none:

@media screen and (min-width: 48em) {
  #nav li:hover .slide ~ ul {margin-left: -10%;}

  .submenu {
    -webkit-transition: 0;
       -moz-transition: 0;
        -ms-transition: 0;
         -o-transition: 0;
            transition: 0;
    }

  #nav #back {display: none;}
}

Все остальные изменения касаются только настройки отступов, как и в предыдущих медиа-запросах.

Мысли

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

Еще один нюанс касается того момента, как подменю отображается после «выезда» на свое место. Подменю скрывает ссылку, используемую для раскрытия подменю, поэтому требуется добавление ссылки "Назад" и модификация кода JQuery для того, чтобы сдвинуть подменю на экране. Возможен другой вариант, который отобразит подменю немного ниже, чтобы оно не закрывало изначальную ссылку, которая открывает подменю.

В заключении

Как и в предыдущих статьях, все шаблоны являются вариантами первого образца. Все они скрывают меню на маленьких экранах, а на его месте отображают кнопку для включения навигационной панели. Мы использовали чекбокс в работе этой кнопки, но мы также можем использовать CSS-событие :target, как в предыдущей статье.

Шаблоны мульти-переключения и слайд-модели расширяют базовые шаблоны, обеспечивая место для подменю. Они работают с помощью JQuery, чтобы переопределить функцию нажатия ссылки по умолчанию, а также для добавления и удаления нового класса, позволяющего изменять стиль подменю в двух состояниях. Отличаются они тем, как CSS показывает, скрывает и отображает подменю.

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

Скачать рабочие материалы
Посмотреть демо

Перевод статьи «Examining Responsive Navigation: Toggle Patterns» был подготовлен дружной командой проекта Сайтостроение от А до Я.

30 июля 2015 в 12:02
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок