Горизонтальное выпадающее меню для блога на Wordpress. Блог для вебмастеров

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

18 Сентябрь 2008 просмотров 5,233 комментариев 36

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

Чтобы сделать подобное, нам понадобиться внести изменения в исходный код меню блога. Обычно это в файле 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);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
 		echo "</ul>";
 	}
	?>
</ul>

свадьба – самое прекрасное событие в жизни невесты, поэтому надо хорошо подготовиться и посмотреть красивые свадебные платье.

Компания “Софт-Сервис” успешно проводит профессиональное обслуживание компьютеров уже более 4-х лет.

Автоинструктор – обучение вождению автомобиля, автомат, АКПП.

Отпуск в Одессе будет беззаботным, если заранее позаботиться о месте жительства. Лучшее решение – аренда квартиры в Одессе, пока недвижимость в Одессе доступна по низким ценам.

мягкие игрушки – самый лучший подарок для малышей. Теперь приобрести игрушку еще проще, когда есть Интернет-магазин Darling Toy.

Все еще ремонтируете? Тогда мы идем к вам! Советы и рекомендации о ремонте.

Теперь пропишем стили для нашего меню, кроме того, мы можем оформить и выпадающее меню, без использования JS (за исключением IE6).

#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;
}

Как только вы добавите CSS код в ваш файл стилей, у вас получиться замечательное xhtml/css валидное выпадающее меню. Если вам нужна поддержка IE6, то придется добавить еще несколько строчек 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(" sfhover\\b"), "");}

                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Готово! P.S. Осталось 3 дня до окончания конкурса! Читайте 4ю подсказку в RSS и заберите свой приз! :)

Комментариев 36 »

]]>Список социальных сетей для публикования новостей | Контекст + 2.0 пишет: ]]>

# 24 Сентябрь 2008 at 13:07
]]>Центр паломничества и туризма Родник» Архив блога » Тест новости1 пишет: ]]>

# 3 Октябрь 2008 at 14:39
]]>Антон пишет: ]]>

Чего-то так и не понял где пример можно глянуть, не править же код ради этого.

Цитировать

# 16 Ноябрь 2008 at 21:49
]]>Автор пишет: ]]>

http://www.2btheatre.com/
наведите на меню

Цитировать

# 16 Ноябрь 2008 at 22:59
]]>Lovedancer пишет: ]]>

Добрый день. Подскажите пожалуйста… У меня почти всё получилось, кроме момента с IE6…..куда именно нужно вставить код, который делает поддержку IE6? ну уже куда только можно вписывал, всё равно менюшки не включались в IE6….

Цитировать

# 25 Март 2009 at 20:20
]]>Автор пишет: ]]>

Как обычно, в head. Естественно, предварительно окружив код в теге <script>...</script>

Цитировать

# 25 Март 2009 at 20:24
]]>Lovedancer пишет: ]]>

Спасибо за подсказку, в теги добавил…..в хеад вставил, но в IE всё равно не видно, причём у меня IE7
……внизу страницы в IE7 пишит, что сайт загружен, но с ошибками на странице…подскажите пожалуйста, что можно предпринять?

Цитировать

# 25 Март 2009 at 21:08
]]>Автор пишет: ]]>

надо видеть что за ошибки.. Ссылка на сайт есть?

Цитировать

# 25 Март 2009 at 21:42
]]>Lovedancer пишет: ]]>

Да, я под этой ссылкой сообщения пишу.

Цитировать

# 25 Март 2009 at 22:00
]]>Автор пишет: ]]>
Там написано “Синтаксическая ошибка” и как раз на той строке, где начинается скрипт.
Вырежи из кода вот эти символы:
```
&nbsp;<![CDATA[//><!]]>
```
- это в конце.

И я же говорила в <head> надо этот скрипт, а не после меню.

Цитировать
# 26 Март 2009 at 8:40
]]>Lovedancer пишет: ]]>

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

Цитировать

# 26 Март 2009 at 13:50
]]>Автор пишет: ]]>

Отправила вам на почту решение и обновила скрипт в статье.

Цитировать

# 26 Март 2009 at 15:42
]]>Автор пишет: ]]>

Тестировала на IE7, но и в 6м должно работать.

Цитировать

# 26 Март 2009 at 15:45
]]>Lovedancer пишет: ]]>

Спасибо, помогло =))) осталось поднастроить css …. а вы кстати подсказать не сможете, где можно взять готовые варианты css для этой менюшки?

Цитировать

# 26 Март 2009 at 15:51
]]>Автор пишет: ]]>

конретно для данного нет, вам в любом случае придется сохранить название классов и элементов и править только сами правила. Отталкивайтесь от текущих стилей, это не сложно ;)

Цитировать

# 26 Март 2009 at 15:58
]]>Lovedancer пишет: ]]>

Спасибо вам большое за столь быструю помощь в решении вопроса ;)

Цитировать

# 26 Март 2009 at 16:41
]]>maykimayk пишет: ]]>

Добрый день! Подскажите пожалуйста, где может быть ошибка.
Скрипт вставил в нужное место, в нужные теги.
В мазиле отображаться как надо, в 6 IE простым списком. НЕ пойму в чем дело..

Цитировать

# 14 Апрель 2009 at 0:55
]]>Автор пишет: ]]>

Нужно посмотреть код. На пальцах же не угадаешь :)

Цитировать

# 15 Апрель 2009 at 7:32
]]>Алексей пишет: ]]>

Такая же фигня… :-(

Цитировать

# 24 Апрель 2009 at 6:33
]]>Виктор пишет: ]]>

Извините, а как сделать тоже самое только для page

Цитировать

# 16 Май 2009 at 14:16
]]>Автор пишет: ]]>

Страницы выводятся функцией wp_list_pages() и по умолчанию “обернуты” в список. Вам только нужно правильно расставить классы в CSS коде. Пример формирования списка страниц смотрите тут

Цитировать

# 16 Май 2009 at 18:28
]]>Виктор пишет: ]]>

Спасибо , Ваш ответ помог. Все работает…
Если можно еще вопрос не совсем по теме. У меня задача вывести список страниц третьего уровня вложенности, но так чтобы второго уровня не было видно. Т.е. ul и ul ul не видны , а ul ul ul выводятся , с помощью стилей типа display: none, получается отрезать только нижние уровни , а верхние нет.

Цитировать

# 17 Май 2009 at 8:53
]]>Автор пишет: ]]>

Это можно сделать только с помощью js, т.к. в CSS свойства наследуются, и если вы сделаете display: none второму уровню, то третий тоже не будет виден.

Цитировать

# 18 Май 2009 at 15:18
]]>Виктор пишет: ]]>

Извините , а как вы сделали “хлебные крошки”,

Цитировать

# 30 Июнь 2009 at 19:04
]]>Блог для вебмастеров пишет: ]]>

Виктор,
“хлебные крошки” прописаны были в теме по умолчанию в ручную на всех страницах темы. Хотя я думаю это можно кодом написать.

Цитировать

# 30 Июнь 2009 at 19:14
]]>Виктор пишет: ]]>

Я где то читал что хлебные крошки очень тормозят работу блога, так ли это?

Я использую для статических страниц такой код

Вариант без главной и последней страницы:

ID;
do {
$p_obj = get_post($p_id);
$p_links[] = ‘ » ID).’”>’.$p_obj->post_title.’‘;
}
while ($p_id = $p_obj->post_parent);
$p_links[] = ‘‘.get_bloginfo(‘name’).’‘;
foreach (array_reverse($p_links) as $p_link) echo $p_link;
?>

Вариант с главной и последней страницей на которой стоишь:

ID;
$p_obj = get_post($p_id);
while ($p_id = $p_obj->post_parent) {
$p_obj = get_post($p_id);
$p_links[] = ‘ » ID).’”>’.$p_obj->post_title.’‘;
}
if (!empty($p_links)) foreach (array_reverse($p_links) as $p_link) echo $p_link;
?>

А для рубрик пока не нашел

Цитировать

# 30 Июнь 2009 at 20:23
]]>Блог для вебмастеров пишет: ]]>

Я бы сделала намного проще, используя функции is_single(), is_categry(), is_tag() и т.п. – в зависимости от этого подставлять в заголовок.
Думаю не хлебные крошки тормозят блог, а то как они реализованы и как “насилуется” база.

Цитировать

# 30 Июнь 2009 at 20:58
]]>vic пишет: ]]>

Извините не совсем в тему. У меня очень много рубрик и подрубрик. Можно ли выводить в сайт баре подрубрики только родительской рубрики (в которой стоишь), по типу pages-subpages

Цитировать

# 22 Сентябрь 2009 at 19:37

]]>Блог для вебмастеров пишет: ]]>

@vic,
да. Попробуйте этот код:

<? global $post; //получаем ID текущей страницы
$myCurPostID=$post->ID;
$curCat = get_the_category($myCurPostID); // получаем категорию текущей страницы
$curCatId = $curCat[0]->cat_ID;
$curCatParent = $curCat[0]->category_parent; // смотрим есть ли родительская категория

if($curCatParent>0):
// если есть, то получаем подрубрики
  $subcategories = get_categories('child_of='.$curCatId.'&order=asc'); ?>
   <ul>
	<? foreach ($subcategories as $subcat): // выводим подрубрики?>
	<li><a href="<?=$subcat->category_nicename?>/"><?=$subcat->cat_name?></a></li>
	<? endforeach;?>
   </ul>
<? endif; ?>

Цитировать

# 23 Сентябрь 2009 at 16:33

]]>vic пишет: ]]>

Что то не получается , ничего не выводит. А что если использовать функцию

А где многоточие вставить переменную ID-родительской рубрики. Когда цифиркой явно прописываешь все работает. Но как получить переменную ….вопрос?

Цитировать

# 23 Сентябрь 2009 at 19:48
]]>vic пишет: ]]>

Прошу прощения функция не отобразилась

wp_list_cats(’sort_column=name&sort_order=asc&optioncount=1&use_desc_for_title=0&child_of=……….’);

Цитировать

# 23 Сентябрь 2009 at 19:50
]]>Блог для вебмастеров пишет: ]]>

vic:

Прошу прощения функция не отобразилась

wp_list_cats(’sort_column=name&sort_order=asc&optioncount=1&use_desc_for_title=0&child_of=……….’);

переменную можно получить так как я вам написала про $curCatParent.
Вам нужны тогда первые 5 строчек моего кода.

Цитировать

# 23 Сентябрь 2009 at 20:03
]]>Блог для вебмастеров пишет: ]]>

вместо wp_list_cats() можно использовать get_category_parents()
Тут инфа: http://codex.wordpress.org/Function_Reference/get_category_parents
Еще о получении ID категории: http://www.web-templates.nu/2008/08/29/get-category-id-alternative/

Цитировать

# 23 Сентябрь 2009 at 20:07
]]>Наташа пишет: ]]>

У меня задача , создать вертикальное многоуровневое выпадающее меню, не очень получается , особенно в IE6, что то со стилями, как только добавляю смещение подменю (с помощью марджина) все разъезжается. Может есть какие наработки?

Цитировать

# 17 Октябрь 2009 at 8:52
]]>rvnikita пишет: ]]>

статья по тему с моего блога: Редактирование меню в Wordpress

Цитировать

# 24 Ноябрь 2009 at 16:03
]]>Mihail Svobodniu пишет: ]]>

это конечно мило, но вы перепутали выпадающие категории и выпадающее меню…

ладно фигня, обидно что так хорошо схватываю все налету а вот с css беда..
как быть со страницами?:

Цитировать

# 9 Февраль 2010 at 0:05