Now WordPress has reached version 3 there are loads of fantastic new features. One of which is the new custom menus feature with the ability to control different menus directly in your template. To start edit your themes functions.php file, if you don’t have one just add a functions.php into wp-content/themes/your-theme-name/ folder.
Add the following code into the file :-
add_action('init', 'register_custom_menus');
function register_custom_menus() {
register_nav_menu('main', __('main'));
}
You should now sort out your menu in WordPress’s backend. Easy to setup just goto Appearance->Menus. Select from pages and click to add, the menu can then be sorted by dragging. Submenus can be added by dragging menu to the right slightly.
Now if you go back to editing your theme, add the following where you want the menu to appear. I normally do this in the header.php so it appears on each page.
<?php wp_nav_menu(array('menu' => 'main', 'menu_class' => 'menu-main')); ?>
You will notice the problem now is you can see all the menu. So what we want is a more conventional menu that only shows child pages from the current page. I have listed the full css I have used on a different site at the bottom on the page, but here are some highlights to notice.
Most important piece of CSS, firstly you need to hide all submenus.
#menu-main li ul.sub-menu {
visibility: hidden;
}
Now show any children of the current page or if the current page is a child of another page show other children with the same parent.
#menu-main li.current-menu-item ul.sub-menu,
#menu-main li.current-menu-parent ul.sub-menu {
visibility: visible;
}
As you can see without the use of javascript or flash we have a dynamic menu. Below is the menu CSS for a site I have recently completed.
.menu-main-container {
/* feel free to ignore this but these widths below were developed while I was doing a grid960 site */
width: 940px;
margin: 0 0 5px;
}
#menu-main {
margin: 0;
padding: 0;
z-index: 99;
position: absolute;
top: 77px;
left: 180px;
}
#menu-main li {
float: left;
list-style: none;
font-size: 12px;
z-index: 99;
margin: 0;
padding: 0;
}
/* First level menu style */
#menu-main li a {
display: block;
padding: 2px 0;
text-decoration: none;
text-align: center;
white-space: nowrap;
z-index: 99;
margin: 0;
/* replace with menu off styles */
width: 75px;
line-height: 27px;
color: #eb0088;
background: url('images/menu-off.gif') no-repeat;
}
/* First level menu on styles */
#menu-main .current_page_item a {
/* replace with menu on styles e.g. backgrounds/colours */
background: url('images/menu-on.gif') no-repeat;
}
/* First level menu on styles */
#menu-main .current-menu-ancestor A:link,
#menu-main .current-menu-ancestor A:active,
#menu-main .current-menu-ancestor A:visited,
#menu-main .current-menu-ancestor A:hover {
/* replace with background/colours for menu on style */
background: url('images/menu-on.gif') no-repeat;
}
/* First level menu on hover styles */
#menu-main li a:hover {
z-index: 99;
/* replace with background/colours for hover styles */
color: #eb0088;
background: url('images/menu-on.gif') no-repeat;
}
/* Sub menu styles
#menu-main li ul.sub-menu {
position: absolute;
visibility: hidden;
z-index: 99;
/* replace with background/colours for submenu, also fix position */
width: 940px;
left: -180px;
top: 27px;
background: url('images/sub-menu-back.gif') top left;
}
#menu-main li ul.sub-menu li {
float: none;
display: inline;
z-index: 99;
background-image: none;
}
/* Submenu styles */
#menu-main li ul.sub-menu li a {
width: auto;
z-index: 99;
text-align: left;
display: inline;
/* replace with your current submenu styles */
background: url('images/sub-menu-hover.png') no-repeat left 13px;
line-height: 23px;
margin: 0 10px 0;
padding: 10px 10px 10px 10px;
color: #d7d6d6;
}
/* submenu hover styles */
#menu-main li ul.sub-menu li a:hover {
z-index: 99;
background-image: none;
/* Replace with submenu hover styles, I added #fff here to highlight onMouseOver */
line-height: 23px;
color: #fff;
}
.current-menu-item li {
margin: 0;
padding: 0;
}
/* Submenu - Now we have styled most of submenu show current pages submenu */
#menu-main li.current-menu-item ul.sub-menu,
#menu-main li.current-menu-parent ul.sub-menu {
visibility: visible;
}
/* Submenu styles - This is style for the submenu link if it is the current page */
#menu-main li.current-menu-parent ul.sub-menu li.current-menu-item A:link,
#menu-main li.current-menu-parent ul.sub-menu li.current-menu-item A:active,
#menu-main li.current-menu-parent ul.sub-menu li.current-menu-item A:hover,
#menu-main li.current-menu-parent ul.sub-menu li.current-menu-item A:visited {
/* Styles here do not matter too much #fff again to highlight colour */
color: #fff;
background-image: none;
}
/* Submenu styles - This is the style for the current pages submenu */
#menu-main li.current-menu-parent ul.sub-menu li A:link,
#menu-main li.current-menu-parent ul.sub-menu li A:active,
#menu-main li.current-menu-parent ul.sub-menu li A:visited {
/* Styles here not too important just stick to colour/background etc */
background: url('images/sub-menu-hover.png') no-repeat left 13px;
}
/* Submenu styles - Style for submenu onMouseOver */
#menu-main li.current-menu-parent ul.sub-menu li A:hover {
/* Styles here not too important just stick to colour/background again */
background: none;
}
Any comments or suggestions for future how-tos please contact me.
