Menu navigasi benar-benar mirip dengan menu navigasi yang terdapat di Microsoft Office. Menu navigasi ini di buat oleh
www.script-tutorials.com.
Berikut
Demo-nya. Kode Css.Copy dan pastekan diatas kode
]]></b:skin> #nav {
position:relative;
z-index:2;
}
#nav ul {
background-color:#B8D1F8;
border:1px solid #000C80;
height:24px;
list-style:none outside none;
margin:0;
padding:1px;
}
#nav ul ul {
background-color:#FFFFFF;
border:1px solid #8A867A;
display:none;
height:auto;
left:0;
padding:0;
position:absolute;
top:25px;
width:168px;
background-image:-webkit-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
background-image:-moz-linear-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
}
#nav ul ul ul {
display:none;
left:168px;
position:absolute;
top:-1px;
width:168px;
}
#nav ul li {
float:left;
margin-right:1px;
position:relative;
}
#nav ul li a {
border:1px solid #B8D1F8;
color:#000;
cursor:default;
display:block;
font:11px Tahoma,Arial;
padding:3px 3px 4px;
text-decoration:none;
}
#nav ul li span {
background:url("../images/u.gif") no-repeat scroll 90% center transparent;
border:1px solid #B8D1F8;
color:#000;
cursor:default;
display:block;
font:11px Tahoma,Arial;
padding:3px 14px 4px 3px;
position:relative;
}
#nav ul ul li span {
background:url("../images/s.gif") no-repeat scroll 97% center transparent;
}
#nav ul ul li {
float:none;
margin-right:0;
padding:1px;
text-indent:10px;
}
#nav ul ul li a,#nav ul ul li span {
border:1px solid transparent;
padding:3px 3px 5px 2px;
}
#nav ul ul li a img,#nav ul ul li span img {
border-width:0;
float:left;
margin-right:5px;
vertical-align:middle;
}
#nav ul li:hover > a,#nav ul li:hover > span {
background-color:#FFF2C8;
border:1px solid #000C80;
color:#000;
}
#nav img.close {
display:none;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:-1;
}
#nav ul li span:focus + ul,#nav ul li ul:hover,#nav ul:hover + img.close {
display:block;
}
Kode Html.Untuk kode html-nya anda bisa pastekan di widget
Html/Javascript.
<div id="nav">
<ul>
<li><span tabindex="1">File</span>
<ul>
<li><a href="#"><img src="images/icon1.gif" alt="" />New</a></li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Open</a></li>
<li><a href="#"><img src="images/icon3.gif" alt="" />Close</a></li>
<li><span tabindex="1"><img src="images/icon4.gif" alt="" />Save</span>
<ul>
<li><span tabindex="1"><img src="images/icon4.gif" alt="" />Option 1</span>
<ul>
<li><a href="#"><img src="images/icon1.gif" alt="" />Option A</a></li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Option B</a></li>
<li><a href="#"><img src="images/icon3.gif" alt="" />Option C</a></li>
</ul>
</li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Option 2</a></li>
<li><a href="#"><img src="images/icon3.gif" alt="" />Option 3</a></li>
</ul>
</li>
<li><a href="#"><img src="images/icon5.gif" alt="" />Save As</a></li>
<li><a href="#"><img src="images/icon1.gif" alt="" />Print</a></li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Exit</a></li>
</ul>
</li>
<li><span tabindex="1">Edit</span>
<ul>
<li><a href="#"><img src="images/icon1.gif" alt="" />Cut</a></li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Copy</a></li>
<li><a href="#"><img src="images/icon3.gif" alt="" />Paste</a></li>
</ul>
</li>
<li><span tabindex="1">View</span>
<ul>
<li><a href="#"><img src="images/icon1.gif" alt="" />Normal</a></li>
<li><a href="#"><img src="images/icon2.gif" alt="" />Web Layout</a></li>
<li><a href="#"><img src="images/icon3.gif" alt="" />Print Layout</a></li>
</ul>
</li>
<li><a href="#">Insert</a></li>
<li><a href="#">Format</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Table</a></li>
<li><a href="#">Window</a></li>
<li><a href="http://maz-waone.blogspot.com/">Help</a></li>
<img class="close" src="images/spacer.gif" alt="" />
</ul>
</div>
Ket !! Text yang berwarna biru ganti dengan judul menu yang anda inginkan
Sekian dari tutor kali ini semoga dapat bermamfaat.
