[![Как добавить скользящее меню в тему WordPress 1](https://coma.lv/wp-content/uploads/2016/09/sliding-menu.webp)](https://coma.lv/wp-content/uploads/2016/09/sliding-menu-1030x396.webp)

# Как добавить скользящее меню в тему WordPress

Sep 16, 2016/by [Vadim Pavlovich](https://coma.lv/ru/author/djcoma/)

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

![WordPress](https://coma.lv/wp-content/uploads/2016/09/slide-panel-menu.jpg)

Внимание: Данная статья требует существенных знаний 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 своим [доменным именем](https://coma.lv/2016/09/17/chto-takoe-domennoe-imya/), а также замените your-themeназванием вашей темы. Сохраните этот файл как slidepanel.js на своём рабочем столе. Этот код использует jQuery для включения скользящего меню, а также создаёт анимацию перехода.

Откройте [FTP клиент](https://coma.lv/ru/2024/08/26/chto-takoe-ftp/), например Filezilla и подключитесь к своему сайту. Далее, перейдите в папку вашей темы. Если в есть папка js, то откройте её, если нету, то создайте её и загрузите файл slidepanel.js в эту папку.

Следующим делом, вам надо создать или найти иконку меню. Обычно используют такую иконку с тремя линиями. Вы можете создать её, используя PhotoShop или же найти её в интернете. Для данной статьи, мы используем иконку размером 27х23 пикселя. Как только у вас будет иконка, переименуйте её в menu.png и загрузите в папку с картинками в директории вашей темы.

Следующим шагом будет [добавление файла JavaScript](https://coma.lv/2016/08/28/kak-pravilno-dobavit-skripty-i-stili-v-wordpress/) для скользящего меню в 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](https://coma.lv/ru/2025/08/28/chto-takoe-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, 0.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. Контакты для бесплатной консультации – [vadim@coma.lv](mailto:vadim@coma.lv), [+371 29394520](tel:+37129394520)*

---