BuddyPress.org

I leveraged the existing drop down method in BuddyPress and created the following code. Three files in my child theme. Modify for your needs.

• header.php
• _inc/css/custom.css
• _inc/scripts/nav.js

header.php

<div id="wp-nav-bar">

<ul id="nav" class="main-nav">

<!-- Community Drop Down -->

<li <?php if (

bp_is_page( BP_ACTIVITY_SLUG ) ||

bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ||

bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ||

bp_is_page( BP_FORUMS_SLUG ) ||

bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Community', 'buddypress' ) ?>"><?php _e( 'Community', 'buddypress' ) ?></a>

<ul>



<?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>

<li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Activity', 'buddypress' ) ?>"><?php _e( 'Activity', 'buddypress' ) ?></a>

</li>

<?php endif; ?>



<li<?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_MEMBERS_SLUG ?>/" title="<?php _e( 'Members', 'buddypress' ) ?>"><?php _e( 'Members', 'buddypress' ) ?></a>

</li>



<?php if ( bp_is_active( 'groups' ) ) : ?>

<li<?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>

</li>



<?php if ( bp_is_active( 'forums' ) && bp_is_active( 'groups' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) get_site_option( 'bp-disable-forum-directory' ) ) && bp_forums_is_installed_correctly() ) : ?>

<li<?php if ( bp_is_page( BP_FORUMS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_FORUMS_SLUG ?>/" title="<?php _e( 'Forums', 'buddypress' ) ?>"><?php _e( 'Forums', 'buddypress' ) ?></a>

</li>

<?php endif; ?>

<?php endif; ?>



<?php if ( bp_is_active( 'blogs' ) && bp_core_is_multisite() ) : ?>

<li<?php if ( bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_BLOGS_SLUG ?>/" title="<?php _e( 'Blogs', 'buddypress' ) ?>"><?php _e( 'Blogs', 'buddypress' ) ?></a>

</li>

<?php endif; ?>



</ul>

</li>

<?php do_action( 'bp_nav_items' ); ?>

</ul>

</div>

custom.css

/* Subnav */

ul#nav li ul						{width: 30.7%;}

ul#nav li ul li						{float: none; width: 100%;}

ul#nav li ul li a					{background: none !important; padding: 5px 15px;}

#wp-nav-bar ul li ul				{position: absolute; left: -999em; z-index: 1;}

#wp-nav-bar ul li ul li a span		{display: none;}

#wp-nav-bar ul li:hover ul,

#wp-nav-bar ul li li:hover ul,

#wp-nav-bar ul li.sfhover ul,

#wp-nav-bar ul li ul li.sfhover ul	{left: auto;}

nav.js

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName="LI") {

node.onmouseover=function() {

this.className+" sfhover";

}

node.onmouseout=function() {

this.className=this.className.replace(" sfhover", "");

}

}

}

}

}

window.onload=startList;



j(document).ready( function() {

/* Admin Bar Javascript */

j("#wp-nav-bar ul.main-nav li").mouseover( function() {

j(this).addClass('sfhover');

});



j("#wp-nav-bar ul.main-nav li").mouseout( function() {

j(this).removeClass('sfhover');

});

});