Ketika merancang sebuah situs baru, web designer biasanya menghadapi pertanyaan: navigasi vertikal atau horizontal? Ada pro dan kontra untuk kedua solusi ini. Salah satu contoh yang navigasi horizontal membatasi jumlah link anda karena memiliki lebar halaman yang terbatas. Ini biasanya diselesaikan dengan menambah drop down sistem pada menu navigasi. Dalam tutorial ini, kita akan menggunakan jQuery untuk membuat sistem navigasi multi-lapis yang berbeda dari jenis-jenis menu navigasi horizontal yang sering kita ketemui.
- Tambahkan Script JQuery dibawah ini diatas kode <b:skin><![CDATA[
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.close").fadeIn();
$("#main-nav li a.main-link").removeClass("active");
$(this).addClass("active");
$("#sub-link-bar").animate({
height: "40px"
});
$(".sub-links").hide();
$(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a.close").click(function(){
$("#main-nav li a.main-link").removeClass("active");
$(".sub-links").fadeOut();
$("#sub-link-bar").animate({
height: "10px"
});
$("#main-nav li a.close").fadeOut();
});
});
</script>
- Kemudian masukan CSS dibawah ini diatas kode ]]></b:skin>
/*--------------------------------------------------
CSS TOP NAVIGATION
---------------------------------------------------*/
#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
}
#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 10px;
padding-left: 0px;
}
#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #514539;
}
#sub-link-bar {
background: #514539;
min-height: 10px;
border-bottom: #645546 1px solid;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -30px;
text-align: left;
left: 0px;
}
#main-nav li .sub-links li a:hover{
background: #2d2620;
}
#main-nav li a.close{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHTPAkPZJI/AAAAAAAAAOE/mvjEVRA-S3I/minus.png) 0px 0px no-repeat;
}
#main-nav li a.close:hover{
display: none;
margin-top: 8px;
position: absolute;
background:url(http://lh5.ggpht.com/_HR8egC6j8tg/TEHStBuH-BI/AAAAAAAAAOA/HmIDAZ33wYA/plus.png) 0px 0px no-repeat;
}
}
<!--Thanks Spiffy Corners-->
.round {
display:block
}
.round * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#645546
}
.round1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #443a30;
border-right:1px solid #443a30;
background:#56493c
}
.round2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #322a23;
border-right:1px solid #322a23;
background:#594c3e
}
.round3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #594c3e;
border-right:1px solid #594c3e;
}
.round4 {
border-left:1px solid #443a30;
border-right:1px solid #443a30
}
.round5 {
border-left:1px solid #56493c;
border-right:1px solid #56493c
}
.roundfg {
background:#645546
}
/*-- Akhir CSS Top Navigation --*/
- Masukkan kode HTML dibawah ini dibawah kode <body>
<div id='sub-link-bar'/>
<!-- End sub-link-bar -->
<!-- Top Navigation -->
<div id='wrap'>
<div id='main-handle'>
<div class='roundfg'>
<ul id='main-nav'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a>
<ul class='sub-links'>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Home</a></li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Tutorials</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tutorial%20Photoshop' title='Tutorial Photoshop'>Tutorial Photoshop</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tools%20Blogging' title='Tools Blogging'>Tools Blogging</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/JQuery' title='Jquer'>Jquery</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Trik%20Blog' title='Trik Blog'>Trik Blog</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/PHP' title='Tutorial PHP'>PHP</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Articles</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Berita' title='Berita'>Berita</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/E-Book' title='E-Book'>E-Book</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Windows' title='Tips Windows'>Tips Windows</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Tips%20Komputer' title='Tips Komputer'>Tips Komputer</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Free</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Software' title='Software'>Software</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Free%20Stuff' title='Free Stuff'>Free Stuff</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/RSS%20FEED' title='Rss Feed'>Rss Feed</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Hacker' title='Hacker'>Hacker</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Security' title='Security'>Security</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Page%20Ranking' title='Page Rank'>Page Rank</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>Videos</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/search/label/Diskografi' title='Diskografi'>Diskografi</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2011/02/tv-streaming.html' title='TV Online'>TV Online</a> </li>
<li><a href='http://amcied-logica.blogspot.com/search/label/Video%20Tutorial' title='Video Tutorial'>Video Tutorial</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://amcied-logica.blogspot.com/'>About</a>
<ul class='sub-links'>
<li><a href='http://amcied-logica.blogspot.com/2009/02/peduli-sesama-bukti-akhlak-mulia.html' title='Link Sahabat'>Link Sahabat</a> </li>
<li><a href='http://amcied-logica.blogspot.com/2009/02/mendekatkan-diri-kepada-allah.html' title='Kontak Saya'>Kontak Saya</a> </li>
</ul>
</li>
<li><a class='close' href='#' title='Click to Collapse'/></li>
</ul>
</div>
<!-- End roundfg -->
<b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>
<!-- End main-handle-->
</div>
<!-- End wrap / Akhir Demo Top Navigation -->
- Silahkan Save Tempalte dan lihat hasilnya, Semoga Bermanfaat...!!!
