Несколько ранее выложил видео урок о том, как создать выпадающее меню на HTML и CSS. Сейчас я напишу как создать горизонтальное выпадающее меню на 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;
}У вас должно получиться что-то наподобие вот такого симпатичного меню :)
С кодом CSS рекомендую поработать самостоятельно и поправить выпадающее меню под стиль вашего сайта.
