Hide and show menu subpages

by

I am sorry if this is not clear, but I am using translated wordpress so I am translating some names back.

I have pages in menu and when I click on some item it goes to that page. But I need f. e. page Item which has subpages SubItem1 and SubItem2. So in menu there would be shown Item, then I click on Item it does not link to a page, but rather shows the following:

  • Item
    • SubItem1
    • SubItem2

From there, if I click on SubItem I’ll get to some page. I can set abovepage but it doesn’t anything.

Is there any hack, trick for this? Or maybe some plugin? I know little jQuery so it might help too.

And what about that with Archive? First show 2011 and 2012 then if I click on some year that gets months for that year and after that I get archive for exact month/year.

Thanks, hope it’s clear what I want 🙂

Edit
This is in my sidebar:

<!-- 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>

This is what is created in html when page is render:

  <!-- 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
3

I think you’re asking how to make a menu with drop downs clickable rather than hoverable, so here’s a very simple example of what I think you want: 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;
}​

EDIT

Using similar HTML that wp_list_pages() outputs.

Leave a Comment