2

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>
4
  • 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, 2012 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, 2012 at 10:36
  • what do you mean; menu in backend or items in your custom menu on frontend?
    – bueltge
    Apr 12, 2012 at 11:12
  • oh, I mean items in my custom menu on frontend
    – Bibo
    Apr 12, 2012 at 18:10

3 Answers 3

2
+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.

8
  • 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, 2012 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 #. Apr 13, 2012 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, 2012 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> Apr 13, 2012 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, 2012 at 11:28
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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