oia lagsung sj yah, ini menu horizontal bag.3 ala akaUTta', dan silahkan lihat menu horizontal dropdown sy sebelumnya:
1. Menu Navigasi Horizontal Dropdown
2. Menu Navigasi Horizontal Dropdown Bag.2
yaa,.. itu klw sobat tdk tertrik mencoba menu yang ini. :D
Baiklah saya tdk akan byk menjelaskan pada tutorial saya kali ini: :D
dan dibawah ini adlah contohnya:
Masih Kurang puas?? silahkan lihat demonya disini..
Mari saya tunjukkan bagaimana cara membuat menu tersebut.
::HTML::
<!-- Horizontal Dropdown START -->
<div class='navaka'>
<ul>
<li><a href='/'>Home</a></li>
<li class='sub'><a href=''>Category</a>
<ul>
<li class='sub'><a href=''>AntiVirus</a>
<ul>
<li><a href='URL-HERE'>Avast</a></li>
<li><a href='URL-HERE'>Avira</a></li>
<li><a href='URL-HERE'>Eset</a></li>
<li><a href='URL-HERE'>Kaspersky</a></li>
<li><a href='URL-HERE'>Norton</a></li>
<li><a href='URL-HERE'>PCmaV</a></li>
<li><a href='URL-HERE'>Smadav</a></li>
</ul>
</li>
<li><a href='URL-HERE'>Cheat Game </a></li>
<li><a href='URL-HERE'>Game </a></li>
<li><a href='URL-HERE'>Hardware</a></li>
<li><a href='URL-HERE'>Turtorial komputer</a></li>
<li><a href='URL-HERE'>W 7 Themes </a></li>
<li class='sub'><a href=''>Printer</a>
<ul>
<li><a href='URL-HERE'>Canon</a></li>
<li><a href='URL-HERE'>Epson</a></li>
<li><a href='URL-HERE'>HP</a></li>
</ul>
</li>
</ul>
</li>
<li class='sub'><a href=''>Blogger Trick</a>
<ul>
<li><a href='URL-HERE'>CSS</a></li>
<li><a href='URL-HERE'>jQuery</a></li>
<li><a href='URL-HERE'>Javascript</a></li>
<li><a href='URL-HERE'>Widget</a></li>
</ul></li>
<li><a href='URL-HERE' target='_blank'>Pasang Iklan</a></li>
<li><a href='URL-HERE' target='_blank'>Request</a></li>
<li class='sub'><a href=''>Follow Me</a>
<ul>
<li><a href='URL-HERE'>on Facebook</a></li>
<li><a href='URL-HERE'>on Twitter</a></li>
</ul></li>
<li><a href='URL-HERE'>Tukar Banner</a></li>
<li><a href='URL-HERE'>Tukar Link Otomatis</a></li>
</ul>
</div>
<!-- Horizontal Dropdown END -->
::CSS::
/*Horizontal Dropdown*/
.navaka{
font:bold 16px Calibri,Arial,Sans-Serif;
max-width:100%;margin-bottom:5px;
}
.navaka *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
.navaka ul{
background:#DE9000;
background:-webkit-linear-gradient(top, #E9A72E, #DE9000);
background:-moz-linear-gradient(top, #E9A72E, #DE9000);
background:-ms-linear-gradient(top, #E9A72E, #DE9000);
background:-o-linear-gradient(top, #E9A72E, #DE9000);
background:linear-gradient(top, #E9A72E, #DE9000);
height:40px;
-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
}
.navaka li{float:left;display:inline;}
.navaka li a{
padding:0px 15px;
line-height:40px;
color:#111;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
display:block;
text-decoration:none;
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
}
.navaka li a:hover{
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
box-shadnw:inset 0px 0px 30px rgba(0,0,0,0.2);
color:#eee;text-shadow:0px -1px 1px #000;
}
.navaka li a:active{
background:#E9A72E;
background:-webkit-linear-gradidnt(bottom, #E9A72E, #DE9000);
background:-moz-linear-gradient(bottom, #E9A72E, #DE9000);
background:-ms-linear-gradient(bottom, #E9A72E, #DE9000);
background:-o-linear-gradient(bottom, #E9A72E, #DE9000);
background:linear-gradient(bottom, #E9A72E, #DE9000);
}
.navaka li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}
.navaka li li{
display:block;
float:none;
width:100%;
}
.navaka li:hover > ul{
visibility:visible;
width:200px;opacity:1;
}
.navaka li li ul{
left:200px;
margin-top:-40px;
}
.navaka li.sub > a{
position:relative;
padding-right:30px;
}
.navaka li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#fff transparent transparent transparent;
position:absolute;
top:20px;
right:10px;
}
.navaka li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #fff;
position:absolute;
top:16px;
right:10px;
}
.clear{clear:both;}
- kode CSS Menu di atas mungkin kurang menarik bagi sobat, tetapi untuk seorang ‘beginner’ seperti saya sudah cukup lumayan….he..he..he…
dan jgn malu tuk meninggalkan komentar sobat jika msh kurang paham.OKE..!! Good luck
Selamat Mencoba!!
Posting Komentar