Mohon maaf mengganggu kenyamanan anda
saat ini ada perbaikan server di TV Streaming

Menu Navigasi JQuery yang Berbeda

Diposting oleh amcied Label:

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.




Berikut beberapa langkah untuk membuatnya :
  • 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(){
$(&quot;#main-nav li a.main-link&quot;).hover(function(){
$(&quot;#main-nav li a.close&quot;).fadeIn();
$(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;#sub-link-bar&quot;).animate({
height: &quot;40px&quot;
});
$(&quot;.sub-links&quot;).hide();
$(this).siblings(&quot;.sub-links&quot;).fadeIn();
});
$(&quot;#main-nav li a.close&quot;).click(function(){
$(&quot;#main-nav li a.main-link&quot;).removeClass(&quot;active&quot;);
$(&quot;.sub-links&quot;).fadeOut();
$(&quot;#sub-link-bar&quot;).animate({
height: &quot;10px&quot;
});
$(&quot;#main-nav li a.close&quot;).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...!!!

Read More..

1 komentar Jumat, 04 Maret 2011 Jam 7:47 PM

Langganan: Komentar (Atom)
 

Copyright © amcied Logica

Selamat Datang

Nama saya Mu'ied, Sosok pemuda pemalu ini lahir di Samarinda, dan kini saya sedang berkuliah disalah satu universitas swasta yaitu Universitas Komputer Indonesia.
Terimakasih telah berkunjung di blog saya.

Social Stuff

Contact

    muied@programmer.net amcied Logica

Info