Creating a menu using CSS

I did not create this tutorial - I take no credit for it.

In this tutorial we will create a simple CSS top menu, which you can easily customize with your site's colors.

We'll start with our html code which displays the menu.

Code:

This won't render anything special to our user's yet, so we'll surround our menu in a div.

Code:

<div id="nav">
<a href="">Link</a> <a href="">Home</a> <a href="">Tutorials</a> <a href="">Nothing</a>
</div>

That's it for our html. Now we need to style our menu using CSS.

Insert the following code into your css file.

Code:

#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}

Now I'll explain how it works. Our first div is called 'nav', which surrounds our menu. The attributes inside it are all pretty self explanitory.

Our next set of CSS tells the browser how to display links inside the nav div. Links are refered to as 'a' in CSS. For the links in our menu we will add a border, some padding, and a background color. We can also style the font.

Our last set of CSS will tell the browser how to display links when the user's mouse hovers over it. We will make the border a bit darker, and change the background and font color.

Our CSS menu is now finished! Now you can easily customize the colors for your site, and change any settings.

For all you lazy people, I'm going to print the complete html and CSS code below.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}
</style>
</head>
<body>

<div id="nav"><a href="">Link</a> <a href="">Home</a> <a href="">Tutorials</a> <a href="">Nothing</a></div>

</body>
</html>

		Email this topic \| Print
0 Members and 1 Guest are viewing this topic.