Недавно один из наших пользователей спросил нас, как им заменить их навигационное меню на скользящее панельное меню на jQuery? Скользящее меню может сильно улучшить пользовательский опыт на мобильных сайтах. В этой статье мы покажем вам, как добавить скользящее меню в тему WordPress.
Внимание: Данная статья требует существенных знаний HTML и CSS.
Замена стандартного меню на скользящее
Цель статьи – показывать скользящее меню пользователям на небольших экранах, и в то же время показывать стандартное меню для пользователей настольных компьютеров, чтобы они могли видеть полное меню. Перед тем, как мы начнём, важно знать, что существует множество тем под WordPress и придётся столкнуться с CSS чуть позже.
Первым делом вам нужно открыть редактор на вашем компьютере и создать новый файл. Скопируйте и вставьте код:
(function($) { $('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); }, function() { $('#popout').animate({ left: -250 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); } ); })(jQuery);
Замените example.com
своим доменным именем, а также замените your-theme
названием вашей темы. Сохраните этот файл как slidepanel.js на своём рабочем столе. Этот код использует jQuery для включения скользящего меню, а также создаёт анимацию перехода.
Откройте FTP клиент, например Filezilla и подключитесь к своему сайту. Далее, перейдите в папку вашей темы. Если в есть папка js, то откройте её, если нету, то создайте её и загрузите файл slidepanel.js в эту папку.
Следующим делом, вам надо создать или найти иконку меню. Обычно используют такую иконку с тремя линиями. Вы можете создать её, используя PhotoShop или же найти её в интернете. Для данной статьи, мы используем иконку размером 27х23 пикселя. Как только у вас будет иконка, переименуйте её в menu.png и загрузите в папку с картинками в директории вашей темы.
Следующим шагом будет добавление файла JavaScript для скользящего меню в WordPress. Просто скопируйте и вставьте этот код в файл вашей темы functions.php
.
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Всё настроено, осталось изменить стандартное меню темы. Обычно большинство меню навигации находится в файле темы header.php
. Откройтеheader.php
и найдите похожую строку:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
Цель – завернуть навигационное меню в HTML код, чтобы показывать ваше навигационную панель на маленьких экранах. Мы вставим его между <div id="toggle">
и <div id="popout">
. Вот так:
<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div> <div id="popout"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>
Замените example.com на ваше имя домена и your-theme на имя папки вашей темы. Сохраните изменения.
Последним шагом станет использование CSS, чтобы скрыть иконку меню для пользователей с большим экраном и показывать её для тех, у кого маленький экран. Нам также нужно указать позицию иконки меню и отображение скользящей панели. Скопируйте и вставьте данный код в стили вашей темы:
@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #eee; padding:20px; width:100%; } .nav-menu li:hover { background:#CCC; } .nav-menu li a { color:#FFF; text-decoration:none; width:100%; } }
Помните, что навигационное меню вашей темы может использовать другие CSS классы и это может вызвать конфликт. Вы можете отладить данные проблемы, используя средство Chrome Inspector, чтобы обнаружить, какие классы css конфликтуют с вашими стилями. Поиграйтесь с CSS, чтобы достичь желаемого результата.
Наша специальность – разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации – [email protected], +371 29394520