Скрыть и показать подстраницы меню
Извините, если это непонятно, но я использую переведенный wordpress, поэтому я перевожу некоторые имена обратно.
У меня есть страницы в меню, и когда я нажимаю на какой-то пункт, он переходит на эту страницу. Но мне нужен, например, элемент страницы, в котором есть подстраницы подэлемент1 и подэлемент2. Таким образом, в меню будет показан пункт, затем я нажимаю на пункт, который не ссылается на страницу, а скорее показывает следующее:
- Предмет
- Подпункт 1
- Подпункт 2
Оттуда, если я нажму на подпункт, я попаду на какую-нибудь страницу. Я могу установить надстройку, но это ничего не дает.
Есть ли для этого какой-нибудь хак, трюк? Или, может быть, какой-нибудь плагин? Я немного знаю jQuery, так что это тоже может помочь.
А как насчет этого с Архивом? Сначала покажите 2011 и 2012 годы, затем, если я нажму на какой-то год, который получит месяцы за этот год, и после этого я получу архив для точного месяц/год.
Спасибо, надеюсь, вам ясно, чего я хочу:)
Редактировать Это в моей боковой панели:
<!-- Pages -->
<div id="navigation">
<li id="sb-pages">
<h2>Stránky</h2>
<ul>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
</li>
</div>
Это то, что создается в html при рендеринге страницы:
<!-- Pages -->
<div id="navigation">
<li id="sb-pages">
<h2>Stranky</h2>
<ul>
<li class="page_item page-item-37 current_page_item"><a href="http://www.hasicisvitavka.cz/">Uvod</a></li>
<li class="page_item page-item-12"><a href="http://www.hasicisvitavka.cz/historie/">Historie</a></li>
<li class="page_item page-item-32"><a href="http://www.hasicisvitavka.cz/technika/">Technika soucasna</a></li>
.
.
.
</ul>
</li>
</div>
3 answers
Я думаю, вы спрашиваете, как сделать меню с выпадающими списками кликабельным, а не зависающим, поэтому вот очень простой пример того, что, я думаю, вы хотите: http://jsfiddle.net/pk5Bx/
HTML
<div id="navigation">
<ul>
<li class="current_page_parent"><a href="#">Top level 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li class="current_page_parent"><a href="#">Top level 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
</ul>
</div>
Javascript/jQuery
$(function() {
$("#navigation .current_page_parent").click(function(){
$(this).children('ul').toggle();
})
});
CSS-код
#navigation ul li {
display: inline-block;
}
#navigation ul ul {
display: none;
}
РЕДАКТИРОВАТЬ
Используя аналогичный HTML-код, который выводит wp_list_pages().
Я сделал нечто подобное только с CSS. Разница лишь в том, что, нажав на пункт родительского меню, вы увидите родительскую страницу. Смотрите это здесь: http://mbccopnetwork.org/mbccop-projects
В моем случае это не было проблемой, потому что вы можете перечислить там описания подстраниц или просто сказать что-то вроде "пожалуйста, выберите подстраницу". С другой стороны, вы только добавляете несколько строк в файл CSS, и все готово - никакого JavaScript.
Если вам это нравится, я могу предоставить код CSS (он работает со стандартным списком страниц/категорий WP).
Я думаю, вам лучше использовать для этого jQuery. вы можете найти пример, который я создал для вас здесь.