I’ve been developing a website for a client who wanted a dynamic side menu. The site is structured, with top level menu items acting as the parent page of second level items. So for example “About Us” is a main menu item, with no parent. The “Management” page, however is a child of “About Us”.

The client wanted a side menu that showed the parent page at the top of the list, with the child pages beneath. The current page needed to be highlighted in red, and they also wanted the menu items to be highlighted in red when you mouse over them.

So I needed to generate a menu that worked out if you were on a child or top level page, and then pull the appropriate pages into a list. Here’s the PHP code that I wrote to create the side menu:

post->ID;
$menuparent = $post->post_parent;
if ($menuparent == 0) {
$menuparent = $thePostID; }
$menuargs = ‘title_li=&include=’.$menuparent;
wp_list_pages($menuargs);
$menuargs = ‘title_li=&child_of=’.$menuparent.’&depth=1&sort_column=menu_order’;
wp_list_pages($menuargs);
?>

And here is the CSS to do the formatting.

#leftmenu {
margin: 0px;
padding: 0px;
}

#leftmenu ul {
list-style: none;
margin: 0px;
padding: 10px 0px 0px 0px;
text-align: left;
text-decoration: none;
line-height: 1;
}

#leftmenu li, #leftmenu li a, #leftmenu li a:link, #leftmenu li a:visited {
color: #9A9C9D;
text-align: left;
text-decoration: none;
display: block;
padding: 4px 0px 4px 10px;
font-size: 14px;
text-indent: 0px;
}

#leftmenu li {
border-top-style: solid;
border-top-color: #9A9C9D;
border-top-width: 1px;
}

#leftmenu li a:hover {
color: #C62032;
}

#leftmenu li a:active {
color: #C62032;
}

#leftmenu .current_page_item a:link, #leftmenu .current_page_item a:visited {
color: #C62032;
}

I’m not a programmer so I’d love to hear some comments about the code or suggestions for improvement?

Tags: , ,
Categories: