How to make menu like news.bbc.co.uk

Now a days I am a great fan of wordpress. Recently I have done some projects on wordpress and getting expert day by day 😛 heh heh.

This post about how can we make menu in wordpress like news.bbc.co.uk. Now a days some clients want clone sites. They don’t think about all the functionality but the look and feel clone 🙂 .
So to clone the menu like news.bbc.co.uk we what we need:
1. wp function wp_list_categories(args)
2. CSS to give look and feel like news.bbc.co.uk

Before we start let’s check what we are going to do:
here is the image that we are going to make or the menu that we are doing to make using wp_list_categories function and css. Look this menu is 2 level deep. To keep the theme clean u can make a function in functions.php file like bellow and just call the function in theme where u want to place the menu.
Look here we are using echo= 0 as want to just return the output from this function. and depth =2 as we want to make two level hirarachy… check others params that I have used. To know details about the template tag wp_list_categories pls check this page in wp codex.

Now what we need is to apply the css to style the menu like news.bbc.co.uk… one thing to keep in mind. When u will browse through the category I mean u click the any category from the menu and posts will be shown using category.php template then active category will get an extra class automatic which is helpfull to highlight using css but if u browse any single.
[code=’php’]function get_leftcatmenu(){
$excludecats = array();
$excludecats = array(1,2,3); //categories to exlclude
//or
//$includecats = array ();
//$includecats = array(1,2,3); //categories to include

/*
// same thing can be done using a simple plugin and saving the categories in option table , bellow code is for comma seperated cat list
$excludecats = explode(‘,’, get_option(‘bbcnews_leftmenucid’));
$excludecats = implode( “,”,$excludecats);
*/
/*
$includecats = explode(‘,’, get_option(‘bbcnews_leftmenuscid’));
$includecats = implode( “,”,$seccats);

//sample code to exclude
return wp_list_categories(‘orderby=name&style=list&hide_empty=0&show_count=0&title_li=&exclude=’.$excludecats.’&hierarchical=true&depth=2&echo=0′);

// sample code to inlclude
return wp_list_categories(‘orderby=id&style=list&hide_empty=0&show_count=0&title_li=&include=’.$includecats.’&hierarchical=true&depth=2&echo=0′);
*/
}
[/code]
post we need the hightlight the category in the menu to which the single post belongs to. But to make this happen that adding an extra class to the menu to make active while browsing any single posts I have used a plugin 🙂 named “Show Active Category (while browsing a post)“. Note if any post belongs to more one category then it will add extra active class to each category.

Uff….now check the css code that I used:
Note: this css code works fine in ff3 and ie6 and I have no interest with other browser at this moment.
Code to use in theme:
[code=’php’]

• home”>