WordPress.org

Ready to get started?Download WordPress

Forums

Creating a nav bar with sub nav drop-downs (5 posts)

  1. Deepanshu Goel
    Member
    Posted 6 years ago #

    Hi, m looking to create a navigation with a sub-navigation having a drop down menu further. Some thing like combining the following 3 examples:
    http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm#
    http://www.pmob.co.uk/temp/tabmenu_mine2.htm#
    http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm

    I want to have the main navigation display categories and then sub-nav to display its sub-categories. Then child categories of that sub-category in drop-down menu.

    Thanks,
    Deepanshu Goel

  2. Deepanshu Goel
    Member
    Posted 6 years ago #

    Hi,
    It bothers me that most of the time when I post some problem or request here in forums, there have never been a response. I've messages going back several months but, still unanswered. :(

  3. nathanrice
    Member
    Posted 6 years ago #

    For the most part, this isn't a WordPress question, it's a web design question. But I'll point you in the right direction:

    First of all, your top navigation should look something like this in the source:

    <ul>
    <?php wp_list_pages('title_li=&depth=1'); ?>
    </ul>

    Then, your subpage nav source should look like this:

    <?php
    global $wp_query;
    
    if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
    } else {
    $parent = $wp_query->post->post_parent;
    } ?>
    <?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
    <div id="submenu">
    <ul>
    <?php wp_list_pages("title_li=&child_of=$parent&depth=2" ); ?>
    </ul>
    </div>
    <?php endif; ?>

    This gives you a top level parent menu, and when you click one of the parent pages, IF IT HAS CHILD PAGES, it will display them in the sub-menu. And IF those sub-pages have child pages of their own, they will be displayed in nested ULs.

    To get them to drop down, you'll want to use the suckerfish CSS technique. Here's a tutorial:
    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Hopefully that gets you started in the right direction. But please don't ask non-WordPress questions in the WordPress support forums.

  4. Deepanshu Goel
    Member
    Posted 6 years ago #

    I want to create the navigation bar dynamically and that too with pure css. I don't want to use any sort of script in this. I want to dynamically combine the two navigations styles:
    http://moneycontrol.com
    and
    http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm

    However, i have tried a lot in the last one week and finally got a little bit close to my target design. see it at:
    http://gt.goelji.com

    Kindly suggest if you have something.

  5. nathanrice
    Member
    Posted 6 years ago #

    I've never actually seen them successfully combined. but the 2 methods you're looking for are:
    http://www.alistapart.com/articles/hybrid

    and:
    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Combining them will be the hard part. Good luck!

Topic Closed

This topic has been closed to new replies.

About this Topic