Горизонтальное выпадающее меню для WordPress

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее

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

Создаем структуру WordPress меню

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

Теперь пункты нашего WordPress меню имеют иерархию, что необходимо для выпадающего меню.

CSS код выпадающего WordPress меню

Меню в вашем шаблоне выводится с помощью PHP кода:

<?php wp_nav_menu(); ?>

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

<div id="main_menu" role="navigation"><?php wp_nav_menu(); ?></div>

Теперь вам осталось добавить следующий CSS код выпадающего меню в файл style.css и у вас все должно заработать:

/* =Menu
-------------------------------------------------------------- */

#main_menu {
clear: both;
font-size: 11pt;
height: 20px;
padding: 14px 0px;
overflow: hidden;
background: #45aeff;
border: 1px solid #bce2ff;
border-bottom: none;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}

#main_menu ul {
clear: both;
margin: 0;
padding: 0px;
}

#main_menu ul li {
float: left;
list-style: none;
padding: 0 10px;
}

#main_menu a {
color: #fff;
padding: 0 10px;
text-decoration: none;
}

#main_menu .sub-menu {
display: none;
position: absolute;
margin: 0;
padding: 10px !important;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
z-index: 999999;
}

#main_menu ul li:hover .sub-menu  {
display: block;
clear: both;
position: absolute;
background: #45aeff;
}

#main_menu .sub-menu li {
clear: both;
}

#main_menu a:hover {
text-decoration: underline;
}

У вас должно получиться что-то наподобие вот такого симпатичного меню :)

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

С кодом CSS рекомендую поработать самостоятельно и поправить выпадающее меню под стиль вашего сайта.

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях