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

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

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

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

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

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

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

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 кода скроет из виду подменю, если вы его случайно установите в панели управления (пункт ВНЕШНИЙ ВИД — МЕНЮ).

Вот и все!!!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>