How To Create A Stylish Horizontal Menu Bar Using HTML And CSS

This is very cute looking menubar. Hope you will like it too.
Lets get started…
First the HTML coading. Its so simple as usual…

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</body>
</html>

Now it is the time for CSS to complete the rest of the work…


#menu 
{
    /*Styling the menu width and height*/
	list-style:none;
	margin:30px auto 0px auto;
	width:600px;
	height:45px;
	padding:0px 20px 0px 20px;
	
  /* Creating the curved corner of the border*/
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

  /*Styling the background with fading effect*/	
	background:#666666;
	background: -moz-linear-gradient(top, #000, #999);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to( #999));
	
  /*Making the shadow effect into the menu bar */
	box-shadow: inset 1px 1px 10px #FFFFFF;
	-moz-box-shadow: inset 1px 1px 10px #FFFFFF;
	-webkit-box-shadow: inset 1px 1px 10px #FFFFFF;
	border:1px solid #000;
	
	
}
#menu li /*Styling the li part of the menu*/
{
	float:left;
	padding:4px 10px 4px 10px;
	display: block;
	position:relative;
	text-align:center;
	margin-right:30px;
	margin-top:7px;
	border:none;
	/*color:#CCCCCC;*/
	
}

#menu li a /*Styling the link part of the menu li*/
{
	text-decoration:none;
	color:#999999;
	text-shadow:1px 1px 10px #FFCC99;
}
#menu li:hover a /*Styling the link part of the menu li in hover state*/
{
	color:#FFF;
	text-shadow:1px 1px 10px #CCC;
}

View the picture below how it looks like…
menubar pic
So, the total script is here…

<!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=utf-8" />
<title>Untitled Document</title>
<style>
#menu
{
	/*Styling the menu width and height*/
	list-style:none;
	margin:30px auto 0px auto;
	width:600px;
	height:45px;
	padding:0px 20px 0px 20px;
	
	/* Creating the curved corner of the border*/
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	/*Styling the background with fading effect*/
	
	background:#666666;
	background: -moz-linear-gradient(top, #000, #999);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to( #999));
	
	/*Making the shadow effect into the menu bar */
	box-shadow: inset 1px 1px 10px #FFFFFF;
	-moz-box-shadow: inset 1px 1px 10px #FFFFFF;
	-webkit-box-shadow: inset 1px 1px 10px #FFFFFF;
	border:1px solid #000;
	
	
}
#menu li /*Styling the li part of the menu*/
{
	float:left;
	padding:4px 10px 4px 10px;
	display: block;
	position:relative;
	text-align:center;
	margin-right:30px;
	margin-top:7px;
	border:none;

	
}

#menu li a /*Styling the link part of the menu li*/
{
	text-decoration:none;
	color:#999999;
	text-shadow:1px 1px 10px #FFCC99;
}
#menu li:hover a /*Styling the link part of the menu li in hover state*/
{
	color:#FFF;
	text-shadow:1px 1px 10px #CCC;
}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</body>
</html>

Copy and paste this to your favorite html editor and see the magic.
Hope you will like it and it will serve your purpose.

This entry was posted in html.

25 comments

  1. samir mansuri says:

    what a website sir? i have got dropdownlist code with this website….
    thank you sir…………… thank you…….

Leave a Reply