От автора: перед тем как сделать бургер-меню для сайта, нужно понять, зачем оно вообще нужно. Если вы хотите, чтобы ваш сайт был адаптивным (а кто не хочет?), важно обеспечить, чтобы главное меню навигации работало на маленьких экранах.
Большие меню навигации могут занимать слишком много места на мобильном телефоне, или они могут быть слишком маленькими, чтобы их можно было прочитать или нажать на нужную ссылку.
Бургер-меню — один из способов решить эту проблему. Это меню скрыто, пока пользователь не нажмет на него. Причина, по которой оно называется бургер-меню, состоит в том, что символ, который обозначает его, представляет собой три горизонтальные линии, расположенные одна над другой, что немного напоминает гамбургер.
Существуют плагины, которые превращают ваше главное меню навигации в бургер-меню в WordPress (в том числе доступные на Code Canyon), но что, если вы захотите закодировать его в своей теме? В этом руководстве вы узнаете, как это сделать.
Чтобы следовать этому руководству, вам понадобится:
установка WordPress
редактор кода
тема, которую вы можете редактировать (если вы используете стороннюю тему, вам нужно создать дочернюю тему)
Стартовое меню
Код, который мы напишем, будет применяться к меню, сгенерированному WordPress с использованием системы меню навигации. Вам не нужно кодировать новое меню для мобильных устройств. (Это одна из часто встречаемых мною проблем, когда сайты имеют разную навигацию на настольном и мобильном устройствах, поскольку это обычно делается в ущерб пользовательскому опыту на мобильном телефоне.)
Я собираюсь продемонстрировать эту технику на примере меню на моем собственном сайте и добавить код в файл header.php, а также в таблицу стилей и новый файл JavaScript. Вот меню для настольных устройств:
Это горизонтальное меню под изображением баннера и заголовком, и над основным контентом. На мобильном телефоне изображение баннера не видно. Я хочу удалить меню и заменить его символом бургера. Когда пользователь нажимает на этот символ, отображается меню. Вот код меню:
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav class="menu main"> <div class="skip-link screen-reader-text"> <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"> <?php _e( 'Skip to content', 'tutsplus' ); ?> </a> </div> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </nav><!-- .main --> |
Это все обернуто в div с классом .menu.main. У нас есть ссылка пропуска для программ чтения с экрана, а затем wp_nav_menu(), включающий функцию ‘container_class’ => ‘main-nav’, которая добавляет дополнительный класс CSS к самому меню. Мы можем использовать позже эти классы для стилизации меню на мобильном телефоне. Итак, начнем.
Добавление символа бургера
Первым шагом является кодирование символа бургера в файле header.php и стилизация его так, чтобы он был виден только на мобильном телефоне. В файле header.php добавьте этот код внутри элемента заголовка (не внутри меню навигации):
|
1 |
<a class="toggle-nav" href="#">☰</a> |
В моем случае это означает, что код для заголовка и навигации похожи на это (обратите внимание, что в приведенном ниже коде я опустила баннер, хотя в моем файле он есть):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="header-bg"> <header role="banner"> <hgroup class="site-name three-quarters left"> <h1 id="site-title" class="one-half-left"> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> </h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <div class="right quarter"> <a class="toggle-nav" href="#">☰</a> </div> <!-- .one-half right --> </header><!-- header --> </div><!-- header-bg--> <!-- full width navigation menu - not on landing page --> <nav class="menu main"> <div class="skip-link screen-reader-text"> <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"> <?php _e( 'Skip to content', 'twentyten' ); ?> </a> </div> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </nav><!-- .main --> |
Таким образом, символ бургера (который добавлен с помощью HTML-кода ☰) находится в заголовке, а под ним — меню навигации. Теперь добавим некоторые стили для элемента toggle-nav.
Стилизация символа бургера
Для начала нам нужно спрятать символ бургера на настольных устройствах. В таблице стилей добавьте этот код, чтобы скрыть символ бургера:
|
1 2 3 |
.toggle-nav { display: none !important; } |
Но вы должны обеспечить, чтобы он отображался на смартфонах. Поэтому добавьте медиа-запрос, используя максимальную ширину, которую вы обычно указываете для медиа-запроса. У меня он такой:
|
1 2 3 4 5 |
@media screen and ( max-width: 580px ) { .toggle-nav { display: inline-block !important; } } |
Это сделает иконку бургера видимой на маленьких экранах. Я использовала, !important чтобы убедиться, что это не отменится никакими другими стилями ссылок в моей теме. Теперь давайте добавим некоторые дополнительные стили. Отредактируйте медиа-запрос так, чтобы он выглядел следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media screen and ( max-width: 580px ) { .toggle-nav { display: inline-block !important; float: right; margin: 25px; font-size: 2em; transition: color linear 0.15s; } a.toggle-nav:link, a.toggle-nav:visited, a.toggle-nav:hover, a.toggle-nav:active { text-decoration: none; color: #fff; } } |
Это добавляет цвет и размеры значка, а также переопределяет любой стиль для ссылок, независимо от того, в каком состоянии они находятся. Вот как теперь выглядит значок бургера на мобильном телефоне:
Это стили значка бургер. Теперь меню навигации.
Стилизация меню навигации
Само меню навигации должно быть стилизовано для мобильных устройств. Внутри медиа-запроса, добавьте этот CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.menu.main { display: inline-block; position: relative; background: #fff; text-align: left; } .menu.main ul { display: none; position: absolute; overflow: auto; top: 0px; right: 0px; z-index: 999; padding-right: 15px; background: #fff; } .menu.main ul li { float: none; display: block; position: relative; top: 0px; right: 0px; min-width: 200px; background: #fff; text-align: right; } .main.menu li:after { content: none; } |
Вот некоторые ключевые моменты того, что делает этот код:
Он меняет цвета и расположение главного меню и выравнивает текст по левому краю.
Он скрывает список внутри меню, поэтому, когда пользователь впервые посещает сайт на мобильном телефоне, меню не отображается.
Он изменяет выравнивание и цвета для элементов списка.
Он задает относительное позиционирование в меню и абсолютное позиционирование в списке, так что он может располагаться поверх содержимого страницы и не сдвигать его вниз.
Он удаляет все элементы после списка элементов, которые в теме предназначены для настольных устройств.
Обратите внимание, что настройки вашего меню могут отличаться и будут зависеть от его стиля для настольных устройств. Важным здесь является скрытие меню и позиционирование.
Добавление JavaScript
Чтобы все это заработало, нам нужно добавить немного JavaScript. Он заставит меню раскрываться, когда пользователь нажимает на значок бургера.
Добавьте в свою тему новый файл с именем burger-menu.js (я хотела бы поместить его в папку scripts). Добавьте в этот файл следующий код:
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery('.menu.main ul').slideToggle(500); e.preventDefault(); }); }); |
Этот скрипт перемещает ul внутри элемента .menu.main вниз, когда пользователь нажимает на элемент .toggle-nav (например, значок бургера). Сохраните файл и закройте его. Но это не сработает, если вы не поставите скрипт в очередь. Откройте файл functions.php вашей темы и добавьте в него:
|
1 2 3 4 5 6 |
function tutsplus_burger_menu_scripts() { wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' ); |
Этот код поставит в очередь ваш скрипт, который заставит бургер-меню работать. Сохраните и закройте файл функций. Теперь, если вы зайдете на свой сайт с мобильного телефона (или в настольном браузере с включенным адаптивным режимом) и нажмете на этот бургер, раскроется меню.
Оно будет располагаться поверх содержимого и не смещать его вниз, и оно красиво раскрывается с помощью эффекта JavaScript. Как раз то, что мы хотели.
Бургер-меню улучшит UX для мобильных посетителей
Громоздкое меню навигации для настольных устройств займет слишком много места на маленьком экране и не даст людям читать контент, ради которого они пришли на ваш сайт.
Но вы ведь не хотите закрыть мобильным посетителям доступ к той же навигации, что и у посетителей с настольных устройств.
Добавив подобное меню, вы получите лучшее из обоих миров: чистый мобильный макет с доступом к той же навигации, что и на компьютере.
Автор: Rachel McCollin
Источник: //code.tutsplus.com
Редакция: Команда webformyself.
