i am sharing a css menu style..!! the nav bar would look like below
Step 1 :- Download the attachment added to this thread
Step 2 :- create 2 files named index.html and style.css
Step 3:- add the below code to your style.css file
Step 4:- and add the below code to index.html
step 5:- keep in such way that all the index.html, style.css and the images (in the attachment) directory are in one folder.
and finally you get your menu bar..!!
If you are too Lazy send me PM i will send you entire source code..!! :lol:
Step 1 :- Download the attachment added to this thread
Step 2 :- create 2 files named index.html and style.css
Step 3:- add the below code to your style.css file
Code:
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#8d8d8d; width:202px;}
.menu{float:left; clear:left; font:bold 11px Arial, Helvetica, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
list-style:none;
}
.menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#fff;
text-decoration:none;
background:url(../images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
*html .menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#fff;
text-decoration:none;
background:url(../images/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited {
background:url(../images/menubg1.jpg) no-repeat;
text-decoration:none;
}
.bot{clear:left;}Step 4:- and add the below code to index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="images/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item"><a href="#">Home</a></li>
<li class=""><a href="#" title="About">About Us</a></li>
<li class=""><a href="#" title="Work">Work</a></li>
<li class=""><a href="#" title="Contact">Contact</a></li>
<li class=""><a href="#" title="portfolio">Portfolio</a></li> </ul>
</div>
<img src="images/bot.jpg" width="202" height="3" alt="" class="bot flt" />
</body>
</html>step 5:- keep in such way that all the index.html, style.css and the images (in the attachment) directory are in one folder.
and finally you get your menu bar..!!
If you are too Lazy send me PM i will send you entire source code..!! :lol:
