Боковое меню для WordPress

HTML и CSS WordSmall

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

Меню, о котором сейчас идет речь больше похоже на дополнительное или даже на мобильное, но при желании возможно использовать как основное. Что насчет браузеров? То поддерживается всеми популярными, а IE не ниже 9-й версии.

Боковое меню состоит из следующих частей:

— HTML
— CSS
— JQuery
— Использования шрифта Font Awesome (необязательно)

Тут все очень просто разметка, стили для оформления и небольшой скрипт. А шрифт нужен для отображения одной иконки. В статье ознакомитесь, как подключить Font Awesome на WordPress. Если шрифт вам не подходит, то придётся иконку делать самому. С устной частью закончили переходим к практике.

Посмотреть Demo

Подключаем боковое меню

Шаг-1. Разметка.

Первым делом разместим HTML разметку в верхней части сайта за нее отвечает файл header.php. Откройте любым редактором файл и найдите функцию, которая выводит верхнее меню. На примере буду работать с темой Clean and Clear. И внутри основного блока навигации нужно добавить код.

Место.

Боковое меню для WordPress

Код.

<div class="slidemenu buttonmenu"><i class="icon-menu"></i></div>
<nav class="menubok menucontent">
<h2>Страницы</h2>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menuside') ); ?>
<h2>Рубрики</h2>
<ul><?php wp_list_categories( 'title_li=' ); ?></ul>
</nav>
<div class="slidengmenuscreen menusliscreen"></div>

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

Шаг-2. CSS стили.

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

.buttonmenu {
  background: none;
  display: inline-block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: none;
  padding: 1px 0 0 76px;/* редактировать при необходимости*/
  float:left;

}

.icon-menu:before {
content:  "\f0c9";
font-family: FontAwesome;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 22px;
min-width: 15px;
text-align: center;
color: #838383;
text-decoration: inherit;
text-transform: none;
}

.menucontent {
  font: 13px verdana;
  position:fixed;
  top:0;
  right: auto;
  bottom:0;
  left:0;
  width:220px;
  height:100%;
  background: #333333;
  z-index: 999999;
  overflow-y: scroll;
  -webkit-transform:translateX(-220px);
-moz-transform:translateX(-220px);
-ms-transform:translateX(-220px);
-o-transform:translateX(-220px);
transform:translateX(-220px);
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-overflow-scrolling: touch;
 }

.menucontent li a {
color: #d1d1d1;
display: block;
padding: 10px 0 10px 20px;/* редактировать при необходимости*/
text-decoration: none;
border-bottom: 1px solid #292929;
transition: all 0.25s ease-in-out 0s;
width: 100%;/* или 220px*/
}

.menucontent li a:hover {
color: #fff;
background: #444;
}

.menucontent li {
list-style: none;
padding: 0px;/* при необходимости убрать*/
margin: 0px;/* при необходимости убрать*/
}

.menucontent h2 {
color: #fff;
text-align: center;
padding: 10px;
background: #555;
font: 14px verdana;
margin: 0;
}

.menusliscreen {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: #222;
  opacity: 0;
  visibility: hidden;
  z-index: 999998;
}

.js-visible {
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
visibility: visible;
  }

В стилях прописаны комментария где, возможно, понадобится изменения все зависит от темы.

Шаг-3. JQuery

Скрипты зачастую подключают между тегами <head></head> в верхней части сайта. Но также можно и внизу что более положительно или даже вывести в отдельный файл и подключить через функцию wp_register_script подробнее здесь. Чтобы у многих не возникло трудностей пойдем простым путем и подключим в footer. Открываем файл footer.php и в конце перед закрывающим тегом </body> добавляем скрипт:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

        // Sliding Menu
          $('.slidemenu').on('click touchstart', function(e){
            $('.menubok').toggleClass('js-visible');
            $('.slidengmenuscreen').toggleClass('js-visible');
            e.preventDefault();
          });

          $('.slidengmenuscreen').on('click touchstart', function(e){
            $('.menubok').toggleClass('js-visible');
            $('.slidengmenuscreen').toggleClass('js-visible');
            e.preventDefault();
          });
});
</script>        

В первой строчке подключается библиотека JQuery если у вас оно подключена, то дважды это делать не нужно.

Итоговый результат

Боковое меню для WordPress

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

Скачать

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 8
  • Елена

    А можно сделать его так, что оно вообще было закреплено?

    • WordSmall

      В смысле закреплено?

  • Александр

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

    • WordSmall

      Обычное меню со своими стилями оформления от темы.

  • Александр

    я просто пересмотрел кучу бесплатных тем и такого не нашел

    • WordSmall

      О каком меню идет речь? Я вижу там только одно «Разделы»

  • Александр

    Именно о разделах и говорю, просто в таком оформлении нужно

    • WordSmall

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

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