Боковое меню WordPress без плагина

Обновлено: Андрей Без плагина

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

И важно отметить, что реализация выезжающего сбоку меню основана на HTML, CSS и jQuery. А это значит, что его можно использовать на любом сайте даже без платформы WordPress.

Почему боковое меню важно?

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

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

Посмотреть демо

Шаг 1: HTML-разметка бокового меню

Начнем с интеграции HTML-кода меню в WordPress. Для этой задачи нам потребуется текстовый редактор файлов, такой как Notepad++ или любой другой. А также определим место, где мы хотим вывести наше меню.

Код меню состоит из двух основных частей: кнопки вызова меню и самого меню. Вы можете разместить их практически в любом месте на сайте, но обычно они размещаются в шапке сайта (header.php). Именно с этой частью мы и будем работать.

  • Откройте файл header.php, который находится в папке вашей активной темы. Обычно путь выглядит так: wp-content/themes/название_вашей_темы/header.php.
  • Найдите место, где вы хотите добавить боковое меню. Обычно это может быть после основного меню.
  • Вставьте код меню в выбранное место файла header.php.
  • Сохраните файл header.php после внесения изменений.
<!-- Кнопка показа меню -->
<div class="ws-icon-menu-toggle ws-but-menu">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
</div>

<!-- Боковое меню -->
<div class="hidden_right_menu">
   <!-- Кнопка показа меню -->
   <div class="ws-icon-menu-toggle ws-but-menu">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
   </div>

   <div class="ws-menu-sections">
      <div class="ws-menu-sections-title">Разделы сайта</div>
          <!-- Сюда добавить желаемую информацию -->
   </div>

   <div class="ws-menu-sections">
      <div class="ws-menu-sections-title">Разделы сайта</div>
          <!-- Сюда добавить желаемую информацию -->
   </div>
   <div class="ws-menu-sections">
      <div class="ws-menu-sections-title">Категории сайта</div>
          <ul><?php wp_list_categories( 'title_li=' ); ?></ul>
   </div>
</div>

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

Шаг 2: CSS-стили бокового меню

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

  • Откройте файл стилей вашей темы, который обычно называется style.css.
  • Добавьте код, тот, что ниже, в конец файла стилей.
  • После внесения изменений сохраните файл стилей.
/* Боковое menu */

.hidden_right_menu {
    height: 100%;
    width: 380px;
    position: fixed;
    right: -380px;
    top: 0;
    background: #222c38;
    transition: all 300ms ease-in-out;
    z-index: 99999;
    padding: 4rem 2rem 2rem 2rem;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.07);
    overflow-y: auto;
}

.hidden_right_menu.hidden_right_menu_show {
    right: 0;
}

.ws-menu-sections {
    opacity: 0;
    margin-left: -15px;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    margin-bottom: 35px;
}

.ws-menu-sections.ws-animatio-show {
    opacity: 1;
    margin-left: 0px;
}

.ws-menu-sections ul {
    padding: 0;
    padding-left: 15px;
    margin: 0;
    list-style: none;
}

.ws-menu-sections ul li {
    padding: 0;
    margin-bottom: 12px;
}

.ws-menu-sections a {
    text-decoration: none;
    transition: .3s;
}

.ws-menu-sections a:hover {
    text-decoration: underline;
    color: #fff;
}

.ws-menu-sections-title {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    margin-bottom: 20px;
}

/* кнопка вызова меню */

.hidden_right_menu .ws-but-menu {
    position: absolute;
    cursor: pointer;
    top: 2rem;
    right: 2rem;
    background: none;
    z-index: 999999;
    display: none;
}

.hidden_right_menu .ws-icon-menu-toggle .line {
    background-color: #fff;
}

.ws-icon-menu-toggle {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}

.ws-icon-menu-toggle .line {
    background-color: #333;
    display: block;
    height: 3px;
    margin: 4px auto;
    transition: 0.3s ease-in-out;
    width: 25px;
}

.ws-icon-menu-toggle.menu-open .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.ws-icon-menu-toggle.menu-open .line:nth-child(2) {
    opacity: 0;
}

.ws-icon-menu-toggle.menu-open .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 480px) {
    .hidden_right_menu {
        width: 100%;
        right: -100%;
    }
    .hidden_right_menu .ws-but-menu {
        display: block;
    }
}

Шаг 3: jQuery-скрипт бокового меню

На последнем этапе нам необходимо подключить скрипт, который обеспечит появление меню при нажатии на кнопку (триггер). В WordPress скрипт можно подключить несколькими способами. Один из самых правильных и рекомендуемых — это использование функции wp_register_script.

Если вы хотите подробнее ознакомиться с этим методом, вы можете посмотреть статью о подключении скриптов в WordPress.

Существует также более простой, но менее правильный способ — добавить скрипт непосредственно в файл footer.php перед тегом body.

<script>
jQuery(document).ready(function($) {
  $('.ws-but-menu').click(function(e) {
    e.stopPropagation();
    var contacts = $('.ws-menu-sections');
    var delay = 200;

    contacts.each(function(index) {
      var contact = $(this);
      setTimeout(function() {
        contact.toggleClass('ws-animatio-show');
      }, (index + 1) * delay);
    });

    $('.hidden_right_menu').toggleClass('hidden_right_menu_show');
    $('.ws-icon-menu-toggle').toggleClass('menu-open');
  });

  $(document).click(function() {
    var menu = $('.ws-menu-sections');
    if (menu.hasClass('ws-animatio-show')) {
      menu.removeClass('ws-animatio-show');
      $('.hidden_right_menu').removeClass('hidden_right_menu_show');
      $('.ws-icon-menu-toggle').removeClass('menu-open');
    }
  });
  $('.hidden_right_menu').click(function(e) {
    e.stopPropagation();
  });
});
</script>

Боковая панель-меню

Давайте рассмотрим ещё один вариант с использованием HTML, JS и CSS. Но в этом случае мы создадим панель-меню с иконками, которое будет выезжать сбоку. Для создания иконок используется шрифт Font Awesome, но вы можете применить собственные иконки или SVG изображения.

Интеграция этой панели в WordPress выполняется аналогично предыдущему варианту для бокового меню. Вам потребуются те же самые файлы и те же действия. И главное, эту выезжающую панель можно интегрировать не только в WordPress, но и в любой другой сайт. Даже если он создан на основе HTML. Это может быть полезно как для Лендингов, так и для других типов веб-проектов.

Посмотреть демо

HTML

<!-- Боковое меню -->
<div class="panel-wrap">
   <div class="panel-content">
      <!-- Кнопка вызова меню -->
      <div class="ws-but-panel">
         <div class="ws-but-inner">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
         </div>
      </div>
      <div class="panel-inner">
         <ul>
            <li>
               <a href="#">
               <span class="icon"><i class="fa fa-bell" aria-hidden="true"></i></span>
               <span class="title">Уведомления</span>
               </a>
            </li>
            <li>
               <a href="#">
               <span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
               <span class="title">Настройки</span>
               </a>
            </li>
            <li>
               <a href="#">
               <span class="icon"><i class="fa fa-life-ring" aria-hidden="true"></i></span>
               <span class="title">Помощь</span>
               </a>
            </li>
            <li>
               <a href="#">
               <span class="icon"><i class="fa fa-pie-chart" aria-hidden="true"></i></span>
               <span class="title">Диаграмма</span>
               </a>
            </li>
            <li>
               <a href="#">
               <span class="icon"><i class="fa fa-star" aria-hidden="true"></i></span>
               <span class="title">Лучший выбор</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>

CSS

/* Боковое menu */

.panel-wrap {
    background: #5CBEEF;
    height: 60px;
    display: flex;
    position: fixed;
    top: 0;
}

.ws-but-panel {
    width: 60px;
    background: #006C97;
    position: relative;
}

.ws-but-panel .ws-but-inner {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    width: 30px;
    height: 20px;
    z-index: 999;
}

.ws-but-inner>div {
    width: 20px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.ws-but-panel div.two {
    top: 10px;
    width: 30px;
}

.ws-but-panel div.three {
    top: 20px;
}

.panel-content .panel-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    height: 100%;
    padding-top: 60px;
    background: #006C97;
    transition: all 0.3s ease;
}

.panel-content .panel-inner ul {
    margin: 0;
    padding: 0;
    list-style: 0;
}

.panel-content .panel-inner ul li a {
    color: #fff;
    font-size: 16px;
    padding: 17px 21px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.panel-content .panel-inner ul li a .icon {
    margin-right: 15px;
    font-size: 22px;
}

.panel-content .panel-inner ul li a span {
    display: inline-block;
}

.panel-content .panel-inner ul li a:hover,
.panel-content .panel-inner ul li a.active {
    background: #fff;
    color: #006C97;
}

.panel-wrap .panel-inner {
    width: 60px;
}

.panel-wrap .panel-content .panel-inner ul li a span.title {
    display: none;
}

.panel-wrap.active .panel-inner {
    width: 225px;
}

.panel-wrap.active .panel-content .panel-inner ul li a span.title {
    display: inline-block;
}
@media (max-width: 480px) {
    .panel-wrap .panel-inner {
          margin-left: -60px;
        }
        
        .panel-wrap.active .panel-inner {
          margin-left: 0px;
        }
}

jQuery

<script>
jQuery(document).ready(function($) {
    $(".ws-but-panel .ws-but-inner").click(function(){
        $(".panel-wrap").toggleClass("active")
    })
});
</script>
Читайте также:
10 комментариев

  2. подскажите плиз как создать боковое меню на подобии того что на этом сайте? Какой плагин использовать?

    Ответить

    1. Александр, так это и есть обычный, стандартный виджет "Рубрики. А его внешнее оформление зависит от темы.

      Ответить

  5. Хороший и достаточно простой на первый взгляд пример с выезжающим меню.

    А может кто подсказать, как изменить скорость, если это возможно. Заранее спасибо.

    Ответить

    1. В классе .menucontent меняйте значение свойства transition. Пример:

      -webkit-transition:all 0.9s linear;
-moz-transition:all 0.9s linear;
transition:all 0.9s linear;

      Ответить
Оставить ответ

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