Не выпадающее горизонтальное меню

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

Давайте рассмотрим как создать горизонтальное не выпадающее меню для сайта, которое настраивается из панели управления.

Скачать исходники для статьи можно ниже

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

Далее рассмотрю пример меню, которое сейчас стоит на моем сайте — горизонтальное не выпадающее.

Данная статья будет частично повторять мою предыдущую статью про создание выпадающего горизонтального меню, так что некоторые нюансы можете прочитать в ней.

Приступим же к созданию :)

1. Первое, что вам нужно сделать – это зарегистрировать наше меню в файле functions.php вашей темы. Для этого заходим в панель управления вашим сайтом, выбираем в левом меню закладку “Внешний вид”, далее выбираем подпункт “Редактор”, далее справа в шаблонах ищем файл functions.php (функции темы). Открываем его, переходим на последнюю строчку, которая выглядит как закрывающийся тег ?>, вот до него мы и вставляем нижеприведенный код.

function theme_setup() { register_nav_menu('Navigation', __('Navigation')); } add_action( 'init', 'theme_setup' ); if ( !is_nav_menu('Navigation') ) { $menu_id = wp_create_nav_menu('Navigation'); wp_update_nav_menu_item($menu_id, 1); }

2. Вставлять меню будем в шапку (header) своего шаблона, так как это самый распространенный вариант.

И для этого в левом меню панели управления сайтом выбираем все также закладку “Внешний вид”, далее подпункт “Редактор” и справа среди “Шаблонов” выбираем файл “Шапка” (header.php).

Внутри файла header.php будем вставить код вызова нашего меню. Данный код нужно вставить там, где мы хотим видеть наше выпадающее горизонтальное меню.

<?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm')); ?> [spoiler title=»Если кому-нибудь интересно, что в данном коде за что отвечает?» open=»0″ style=»1″]

Взял с сайта http://wordpressinside.ru/functions/wp_nav_menu/:

$menu – выбранный идентификатор для меню – ID, slug или название меню.

$container – меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.

$container_class – указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.

$container_id – можно добавить контейнеру ID, по умолчанию не указано.

$menu_class – класс для элемента меню UL, его значение – menu.

$menu_id – ID для элемента ul, по умолчанию равно значению menu-{slug}

$echo – если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.

$fallback_cb – если меню не существует, вызывается функция wp_page_menu.

$before – задает текст, который выводится перед ссылкой А.

$after – текст после ссылки А, по умолчанию он, как и предыдущий, пустые.

$link_before – выводит фразу перед текстом ссылки, не задано.

$link_after – выводится после текста ссылки, тоже пустое.

$depth – задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.

$walker – какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.

$theme_location — локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.

[/spoiler]

На своем сайте я заключил данный код в тег div, для того, чтобы применить к нему стиль оформления menu2, который создает отступ слева, вот так он у меня выглядит:

<div id="menu2"> <?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm')); ?> </div>

3. Осталось добавить css стилей для нашего меню. Для этого опять выбираем в левом меню панели управления ярлык “Внешний вид”, далее подпункт “Редактор”, далее справа среди шаблонов выбираем файл “Список стилей” (style.css), в нем также идем в конец и вставляем следующий код:

#menu2 { padding: 0 0 0 20px; } #jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; } #jsddm li a:hover { background: #1A4473; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; }

Последний абзац css кода скроет из виду подменю, если вы его случайно установите в панели управления (пункт ВНЕШНИЙ ВИД — МЕНЮ).

Вот и все!!!

rss