First we have to get nice graphic for this menu. I'll use this set:
1
2
3
4
5
You can make, and slice it Yourself by going through my two other tutorials
1. Nice, clean vertical menu
2. Slice Your web graphic properly
Our goal will be:
First we have to take care of the xHTML skeleton for our menu
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</p> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Sample menu</title> <link href="/img_articles/13450/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menu"> <div id="menubody"> <ul id="menulist"> <li><a href="/img_articles/13450/#">Position 1</a></li> <li><a href="/img_articles/13450/#">Position 2</a></li> <li><a href="/img_articles/13450/#">Position 3</a></li> <li><a href="/img_articles/13450/#">Position 4</a></li> <li><a href="/img_articles/13450/#">Position 5</a></li> </ul> </div> <div id="menubottom"></div> </div> </body> </html> |
Explanation
First seven lines are only doctype and headers. Only inportant thing is <link href="/img_articles/13450/style.css" rel="stylesheet" type="text/css" /> which is CSS stylesheet link (We will make it soon)
<div id="menu">...</div> - this div contains all menu structure (we will use it for top image part too)
<div id="menubody">...</div> - this div contains menu body, and unordered list (we use it for center repeated part - image no.2, and as InternetExplorer 6 fix)
<ul id="menulist">...</ul> - this is menu structure - unordered list.
<li><a href="/img_articles/13450/#">Position 1</a></li> - this is one menu position (anhor inside list) - href="/img_articles/13450/#" can be replaced by URL
<div id="menubottom"></div> - this gif contains bottom image part.
You can save this file for example as menu.html
Now it's time for most important CSS part:
| * {margin:0; padding:0;}
div#menu {width:184px; background:url(menu_1.gif) top no-repeat; padding-top:44px;} div#menubody {background:url(menu_2.gif) repeat-y; padding-left:21px;} div#menubottom {height:26px; background:url(menu_4.gif) bottom no-repeat;} ul#menulist {width:144px; list-style-type:none;} ul#menulist li {height:27px; background:url(menu_3.gif) bottom repeat-x;} ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;} ul#menulist a:hover {background:url(menu_5.jpg) left repeat-y;} |
You can save it as style.css
Explanation
* {margin:0; padding:0;} - this is global reset. It sets margins and paddings to 0. I use it almost in any project.
div#menu - nothing special here. Just width declaration, and background image (top one - number 1). Padding was set to 44px (that is the height of top image)
div#menubody - again, only background was set (with repeat-y) , and padding left (we place ul in right position)
div#menubottom - again, background and height - nothing special
ul#menulist - we use list-style-type:none to hide "bullets"
ul#menulist li - here the magic starts. We set height for li elements, and background image which is placed bottom (it's this small 1px to 2px rectangle) and repeat-x - it is our separator line
ul#menulist a - we set width and height of a element, than set border-left to 10px with right color. Then font color and type and paddings for right placement. Last thing is: display:block !important; display:inline-block; . Because of InternetExplorer, we have to use two declarations. First is for firefox, opera and other browsers they use it because !important value, and last is for IE which is ignoring !important. Both does almost this same thing.
ul#menulist a:hover - this is for hover effect (rollover). We use 1px strip repeat-y.
And that's all. You can check final result here.
More HTML and CSS: 
