Creating a Website menu using unordered list and CSS
Top level horizontal menus can be seen on a lot of Websites. Wondering how to quickly create one for your own site? If you are a theme developer(wordpress,joomla, drupal etc.), you will come across this need very frequently. There are many options to create horizontal menus, but the easiest and the most HTML friendly way is to use HTML unordered list (UL tag) and CSS. In this post I will show you how easy it is to create a menu using UL tag and CSS.
1. As the first step create a menu structure using UL and LI tags - The following HTML code defines a sample menu structure. Note that the default UL behaviour is to list items vertically with bullets.
<html> <body> <ul> <li><a href="#">Home</a> <li><a href="#">Subscribe</a> <li><a href="#">About</a> <li><a href="#">Contact</a> </li></ul> </body> </html>
2. Covert the menu to horizontal form - Before we can convert the ul/li tags to the horizontal form, we need to attach styles to it. In this case, I have enclosed the UL/LI in a div with class "menu". You can then apply CSS to the styles as given below. As you can see it requires just 2 style attributes to change the menu to horizontal form.
<html> <style> .menu ul li { list-style:none;display:inline;} </style> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
3. Add styles for links in the menu - Now we need to convert the links to look like a menu. The idea here is to increase the padding of anchor tag and then apply a different style when the mouse hovers over the link. We first apply float property on LI to remove unnecessary padding and to make it look like a menu. Then we apply disply:block to the anchor tag inside LI. The anchor tag will now occupy the complete space inside LI tag. We then add padding to the anchor tag to bring adequate space between menu items. Also anchor background color is changed when mouse hovers over the link. Here is it in action,
<html> <style> .menu ul li { list-style:none;display:inline;float:left;} .menu ul li a {padding:10px;background-color:blue; display:block;color:white;text-decoration:none;} .menu ul li a:hover {padding:10px;background-color:black;} </style> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
4. Use images in the background for better visual effects - The menu is now complete. But you can give better visual effects if you use images instead of direct color codes for the background. Check out the following example which uses images for anchor backgrounds. In the hands of an expert Web designer the background images alone can create exceptional effects!
<html> <style> .menu ul li { list-style:none;display:inline;float:left;} .menu ul li a {padding:10px;background:url(bg.png);display:block; color:#990000;text-decoration:none;font-weight:bold;} .menu ul li a:hover {padding:10px;background:url(none) black;} </style> <body> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
Related Articles
- No related posts
One Comment to “Creating a Website menu using unordered list and CSS”
Leave a Comment
Got any comments/queries about this article? You can post them above and I will get back to you. You can also subscribe to the RSS feed to get latest updates on this site. Got a good coding tip? Send it to me with your name and I will publish it here.
November 5th, 2008 at 12:56 pm
This tutorial, demonstrated perfectly and very concisely exactly what I needed for a css menu as I try to break away from table based to css based layout.
However, is there any way to remove the automatically added padding (about 30px wide) on the left hand of the ul tag? I’ve tried setting padding and margin to 0px with no effect.
Thanks