Double Door CSS menu
This tutorial explains how to Create Beautiful Double Door CSS menu tutorial .
The final result is something like this:
Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:
<div id=”MainMenu”>
<div id=”tab”>
<ul>
<li class=”item_active”><a href=”#”><span>Home</span></a></li>
<li><a href=”#”><span>Ajax</span></a></li>
<li><a href=”#”><span>CSS</span></a></li>
<li><a href=”#”><span>Photoshop</span></a></li>
<li><a href=”#”><span>Vector graphic</span></a></li>
</ul>
</div>
</div>
Step 2: CSS file
#MainMenu
{
position:absolute;
width:643px;
height:22px;
margin:0;
border:0;
text-align:center;
left: 239px;
top: 189px;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 3px 0 0 ;
padding:0;
}
#tab a
{
background:#000000 url(„images/bright_021 copy.gif”) no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url(„images/bleft_021.gif”) no-repeat left top;
padding:0 18px 0 18px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#006600;
font-weight:bold;
line-height:22px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:#000000;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#000099;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
Save and test the result!
![download_box[1]](http://lh6.ggpht.com/_zffIzal5cfI/Sff3qTSla2I/AAAAAAAADqI/-L3m-R_BvGc/download_box%5B1%5D%5B5%5D.png?imgmax=800 "download_box[1]") download The Article |
![video[10]](http://lh6.ggpht.com/_zffIzal5cfI/Sff3tVFJK5I/AAAAAAAADqM/R7MKuKCVfnc/video%5B10%5D%5B6%5D.png?imgmax=800 "video[10]") View The Demo |
You can skip to the end and leave a response. Pinging is currently not allowed.