Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
    
I'm not sure i understand what you mean by "pages in menu". Do you have a navigation panel with tabs that alternate which "pages" with subitems are shown? –  moraleida Apr 12 '12 at 3:54
    
I mean in sidebar like this ´<!-- Pages --> <li id="sb-pages"> <h2>Stránky</h2> <ul> <?php wp_list_pages('sort_column=id&depth=1&title_li='); ?> </ul> </li>´ and for archive I want this working too ´<!-- Archives --> <li id="sb-archives"> <h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly&show_post_count=1'); ?> </ul> </li>´ –  Bibo Apr 12 '12 at 10:36
    
what do you mean; menu in backend or items in your custom menu on frontend? –  bueltge Apr 12 '12 at 11:12
    
oh, I mean items in my custom menu on frontend –  Bibo Apr 12 '12 at 18:10
add comment

3 Answers

up vote 2 down vote accepted
+50

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.

share|improve this answer
    
Yea, I want to do this but I want to add this in wordpress backend. I want that ordinary user can go to wordpress administration and in pages set that this is page which will be parent and this pages will be shown after click on that parent. User should add pages without editing code. Thanks –  Bibo Apr 13 '12 at 4:46
    
This will work like that. The only thing the user would have to specifically set is adding the top level menu item as a custom link "Top Level" with the URL of #. –  developdaly Apr 13 '12 at 13:28
    
I am sorry but I still don´t know how can I edit this: ´<?php wp_list_pages('sort_column=id&depth=1&title_li='); ?>´that it created HTML as you shown. –  Bibo Apr 13 '12 at 14:10
    
I edited the HTML and JS to us classes that wp_list_pages() outputs. In your theme, wrap wp_list_pages() function with <div id="navigation"></div> –  developdaly Apr 13 '12 at 15:19
    
I just have problem that ´wp_list_pages()´ is creating li with this class ´class=page_item page-item-xxx´ where xxx is id of article (or something like that). So jquery can´t be aplicated to these lists (li). Can you help me with this? How to change that ´wp_list_pages()´ creates li with same class? –  Bibo Apr 16 '12 at 11:28
show 3 more comments

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).

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.