How to Create a Custom WordPress Navigation Menu with the Code?

Question

Without using plugins, how to create a custom WordPress navigation menu with the code?
I have Wordpress ver 3.2.1
and Buddypress ver 1.5.1

I would like to create a menu.

I would like to place the buddypress menu navigation items into one item (social). when you pass the mouse over this item it appears the buddypress menu items in style Drop-Down Menu.

Can you help me? Thank you and sorry for my bad english!

Answer 1

Well first of all you can use the menu feature in the newer WordPress.

First you want to activate the fact that you want to use this feature via your functions.php file.

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' ),  
'secondary' => __('Secondary Navigation', 'your_theme_name')  
) ); 

The above code defines if you have more than one menu. If you want just one menu delete the secondary. If you do this it would look something like this in your functions.php file:

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
'primary' => __( 'Primary Navigation', 'your_theme_name' )
) );

This will now give you the option to add page items via the menu option under Appearance in the back-end.

Next in your theme you will want to add this to where you want the menu to appear:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' =>   'primary' ) ); ?>

The term "menu-header" will be the class of the div tag that the menu gets put in to. You can change this to whatever class you want the div tag to be in your theme.

Next everything else is done entirely via CSS.

/*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

Just make what changes you need to, to make it look like the example you have posted.

Answer 2

WordPress has Custom Navigation Menus built-in.

Simply register a theme_location for each menu in functions.php, then go to Dashboard -> Appearance -> Menus to create the custom menu(s), and apply the custom menu(s) to the appropriate Theme Location(s).

The rest is a matter of CSS (or jQuery, if you really want to go that route).