Dynamic menus with nav_menu in Product Theme

I am working on a replacement for the built in navigation system in the Product theme and need some help to get it operational.

The goal is to produce TopNavigation and SubNavigation menu bars (in the same locations as the current navigation and buddypress menus) where hovering over or clicking on any item in TopNavigation will produce a corresponding menu in the SubNavigation bar. I am working off the approach described here: http://woork.blogspot.com/2008/05/pastel-color-menu-with-dynamic-submenu.html

To do this, I've
1. Created a child theme
2. Altered the header.php file in the root by
including the following JQuery script at line 62:
<!-- Script for dynamic submenus -->
<script type="text/javascript">
function showsubmenu(id){
submenu=document.getElementById('s'+id);
for(i=1;i<=6;i++){
if(i==id){
submenu.style.display="block";
} else{
document.getElementById('s'+i).style.display="none";
}
}
}
</script>
<!-- End dynamic submenus -->

and by commenting out this code at line 175:
<?php if( $bp_existed == 'true' ) { //check if bp existed ?>
<?php locate_template( array( '/library/components/buddypress/buddypress-navigation.php' ), true ); ?>
<?php } else { // if not bp detected..let go normal ?>
<?php locate_template( array( '/library/components/navigation.php' ), true ); ?>
<?php } ?>

and replaced it with:
<?php locate_template( array('/library/components/alt-nav.php'), true ); ?>

3. Created an alt-nav.php file (attached) which contains the menu layouts as described on the site above.

4. Created a functions.php file in the _inc subfolder which registers submenus corresponding to each of the topnavigation items using register_nav_menus().

I haven't yet worked on any styling because the menus fail to load at all right now and I've no idea what I'm missing. You can check my work at http://www.alongside.org/new/

Any suggestions?

  • chiinook

    I'm waving the "all clear" on this one. The only problem appeared to be a mispelling of my call to the alt-nav.php file. The result can be seen on our development site at http://www.alongside.org/new/.

    If you'd like to implement something similar on your own site, you're welcome to make use of the code above. Put the following style rules (based on #page-navigation rules in layout.css and #buddypress-navigation rules in library/styles/product.css) into your child.css style sheet in the _inc/styles/ folder of your child theme:


    /* Custom Top- and Sub- Navigation styling */
    #page-navigation, #sub-navigation{
    height: 40px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 0px 20px;
    }
    #page-navigation{
    background: none;
    }
    #sub-navigation{
    background: #ffffff url('product-images/navigation_gradient.png') repeat-x;
    }
    #page-navigation .sf-menu a, #page-navigation .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #666666;
    text-shadow: #ffffff 1px 1px 0;
    }
    #page-navigation .sf-menu li li {
    background: #f3f3f3;
    }
    #page-navigation .sf-menu li li li {
    background: #f3f3f3;
    }
    #page-navigation .sf-menu li:hover, #page-navigation .sf-menu li.sfHover,
    #page-navigation .sf-menu a:focus, #page-navigation .sf-menu a:hover, #page-navigation .sf-menu a:active, #page-navigation .sf-menu .current_page_item, #page-navigation .sf-menu .selected{
    background: #f3f3f3;
    color: #222222;
    text-shadow: #ffffff 1px 1px 0;
    outline: 0;
    }
    #sub-navigation .sf-menu a, #sub-navigation .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #666666;
    text-shadow: #ffffff 1px 1px 0;
    }
    #sub-navigation .sf-menu li li {
    background: #f3f3f3;
    }
    #sub-navigation .sf-menu li li li {
    background: #f3f3f3;
    }
    #sub-navigation .sf-menu li:hover, #sub-navigation .sf-menu li.sfHover,
    #sub-navigation .sf-menu a:focus, #sub-navigation .sf-menu a:hover, #sub-navigation .sf-menu a:active, #sub-navigation .sf-menu .current_page_item, #sub-navigation .sf-menu .selected{
    background: #f3f3f3;
    text-shadow: #ffffff 1px 1px 0;
    color: #222222;
    outline: 0;
    }
    /* hides all but the initial submenu on page load */
    #s2, #s3, #s4, #s5, #s6 {display:none;}

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.