Hide and show menu subpages

Question

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>

Answer 1

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.

Answer 2

I did something similar only with CSS. The only difference is that clicking on parent menu item, you see the parent page. See it here: http://mbccopnetwork.org/mbccop-projects

In my case it was not a problem, because you can list there descriptions for subpages or just say something like "please select subpage". On the other hand you only add some lines to CSS file and you're done - no JavaScript.

If you like it, I can provide the CSS code (it works with standard WP page/category listing).

Answer 3

I think you better use jQuery for that. you can find the example I have created for you here.