Friday, January 15, 2010

How to add a drop down menu in Word Press for your site?

Adding a drop down menu in header portion of wordpress:


  • First install word press.
  • You can find the latest version of word press at the url http://wordpress.org/
  • Now install it.
  • To add a header in your word press please follow the following steps mentioned below:
  • In word press you can locate the theme folder (where your site theme is present) in wp-content -> themes -> locate your folder. For now we will try to customize the default theme of word press.
  • Now locate the file header.php and open it in using editing software like Dreamweaver.
  • Add the following two lines of code just below the headerimg div.
<ul id="nav">
        <?php wp_list_pages('title_li=&depth=0&sort_column=menu_order&exclude=56'); ?>
</ul>

This above line of code lists all the pages present in the database.
•    Depth=0 will display all the subpages without any restriction.
•    Sort_column=menu_order will sort according the menu id
•    Exclude will exclude the page with id 56 from being displayed in the navigation.
Now open the style.css present in the same theme folder of word press.

Add the following css code in it.
/*navigation menu */
#nav {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-color:#60625C;
bottom:0;
left:0;
margin:0;
padding:0;
width:100%;
position:absolute;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}
#nav li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
border-right:1px solid #6E7073;
}
#nav a, #nav a:visited {
color:#FFFFFF;
display:block;
padding:0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
border-bottom:1px solid #6E7073;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}
#nav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
border-left:1px solid #6E7073;
border-right:1px solid #6E7073;
border-top:1px solid #6E7073;
width:220px;
}
#nav li li a, #nav li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}
#nav li li a:hover, #nav li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
/*navigation menu */

Get a good drop down navigation menu in word press using CSS.