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

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

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

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

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

Шаблоны

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

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

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

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

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

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

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

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

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

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

Шаг 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;}
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

Шаг 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;}

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

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

Шаг 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 . Он будет использоваться для открытия-закрытия ссылок меню в виде гармошки:

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

Шаг 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: " 025Bc";  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;}
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

Шаг 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;  });});
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

Шаг 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>
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

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

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

.slide:after {  content: " 025B6";  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 , чтобы показать подменю. Все что останется сделать – задать свойству lef t значение auto . Далее сменим фон ссылок подменю, чтобы переход выглядел более наглядно. Теперь мы скрыли меню, но нам необходимо иметь функция нажать на ссылку «Назад».

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

.submenu.open {  left: 0;}.submenu.open a {  background: #555;}#back:before {  content: " 025C0";  font-size: 0.5em;}
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

Шаг 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;  });});
Изучаем шаблоны отзывчивого навигационного меню: шаблоны раскрывающихся меню

Шаг 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 показывает, скрывает и выводит подменю.

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

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

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

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