Ранее мы писали, про создание различных меню для сайта, которые можно было адаптировать под свои необходимости. Сегодня, я хотел бы рассказать вам, про то, как создать горизонтальное выпадающее меню для блога на WordPress, которое будет выводить Категории и Подкатегории блога.
Итак, открываем файл в котором будем «устанавливать» наше меню, в моем примере это файл header.php. Вставляем следующий код:
<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
?>
</ul>
В файл стилей style.css вставляем:
#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}
#nav2 li {
float: left;
list-style:none;
}
#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}
#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}
#nav2 li li {
width: auto;
}
#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}
#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}
Закрываем и сохраняем изменения в файле. Если у вас нормальный браузер (т.е. не браузер семейста IE) то вы увидите готовое полностью валидное меню написанное на «голом» css, без применения javascript.
Для того, чтобы «заставить» меню работать в не нормальных браузерах (IE) в заголовке сайта (до тега ) вставляем JS код:
<script type="text/javascript">
var selItem;
sfHover = function() {
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
if (selItem!=this)
{
if (selItem!=null){
selItem.onmouseout();
}
selItem = this;
}
}
sfEls[i].onmouseout=function() {
if (selItem==this) {this.className=this.className.replace(new RegExp(" sfhoverb"), "");}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Вуаля! Все готово!
P.S. Если Вы, по каким-то причинам захотите выводить через меню не Рубрики а Страницы, то вместо:
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
?>
Вставляем
<?php wp_list_pages('sort_column=menu_order&title_li=&child_of='. $parent_id); ?>
Ответить | Цитировать
$ t h i s _ c a t e g o r y = g e t _ c a t e g o r y ( $ c a t ) ;
Разве это нужно? Если да, то какое значение оно имеет?
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
думаю на CSS это сделать было бы логичнее, нет?
У кого к чему душа лежит.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
На вкус и цвет...
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать