Pro CSS Menu
Tweet
A clean, professional, horizontal CSS menu in both brown and blue.
This sleek, professional menu comes in both brown and blue (or you can buy the PSD to easily customize it). It can blend into any corporate or portfolio site to give an impressive and stylish menu.
FAQ
* Entire menu system is small and compact
* 4 image files, 1 css file, 1 html file
* Has been tested and works in over 150 broswer/operating system combos
* It’s FREE for you to use
Other Notes
As you can see in the source code, the “Home” tab has the ON state by adding the “current” class to the a tag. Very straight forward!
Demo
CSS CODE
<style type="text/css">
#procontainer_brown {
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
}
#pronav_brown {
position:relative;
height:32px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;
border-bottom: 8px solid #886d53;
}
#pronav_brown ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#pronav_brown ul li {
display:block;
float:left;
margin:0 1px;
}
#pronav_brown ul li a {
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:32px;
}
#pronav_brown ul li a span {
padding:12px 20px 0 0;
height:21px;
float:left;
font-weight: normal;
font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;
}
#pronav_brown ul li a:hover {
color:#fff;
background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg-OVER.gif) repeat-x bottom left;
}
#pronav_brown ul li a:hover span {
display:block;
width:auto;
cursor:pointer;
}
#pronav_brown ul li a.current,#pronav ul li a.current:hover {
color:#fff;
background:#886d53 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/brown_pro_left-ON.gif) no-repeat top left;
line-height:275%;
}
#pronav_brown ul li a.current span {
display:block;
padding:3px 20px 0 0;
width:auto;
background:#886d53 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/brown_pro_right-ON.gif) no-repeat top right;
height:32px;
}
-->
<!-- Pro Blue
#procontainer_blue {
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
}
#pronav_blue {
position:relative;
height:32px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;
border-bottom: 8px solid #77becf;
}
#pronav_blue ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#pronav_blue ul li {
display:block;
float:left;
margin:0 1px;
}
#pronav_blue ul li a {
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:32px;
}
#pronav_blue ul li a span {
padding:12px 20px 0 0;
height:21px;
float:left;
font-weight: normal;
font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;
}
#pronav_blue ul li a:hover {
color:#fff;
background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg-OVER.gif) repeat-x bottom left;
}
#pronav_blue ul li a:hover span {
display:block;
width:auto;
cursor:pointer;
}
#pronav_blue ul li a.current,#pronav ul li a.current:hover {
color:#fff;
background:#77becf url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_left-ON.gif) no-repeat top left;
line-height:275%;
}
#pronav_blue ul li a.current span {
display:block;
padding:3px 20px 0 0;
width:auto;
background:#77becf url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_right-ON.gif) no-repeat top right;
height:32px;
}
</style>
HTML CODE
<div id="procontainer_blue">
<div id="pronav_blue">
<ul>
<li><a href="http://www.phpasks.com" title="css menus"><span>Home</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>About Us</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Services</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Our Work</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<br /><br />
<div id="procontainer_brown">
<div id="pronav_brown">
<ul>
<li><a href="http://www.phpasks.com" title="css menus"><span>Home</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>About Us</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Services</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Our Work</span></a></li>
<li><a href="http://www.phpasks.com" title="css menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
No comments yet.