Главная Новости

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

Опубликовано: 01.09.2018

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

Вертикальное меню (Wordpress Menu Vertical)

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


Wordpress - Вертикальное меню

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

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


Стильное меню на сайт Wordpress плагин Accordion Menu

— HTML

— CSS

— JQuery

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

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

Посмотреть Demo

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

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

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

Место.

Код.

<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 если у вас оно подключена, то дважды это делать не нужно.

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

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

rss