I'm → Botzzz: Different Top Navigation With Jquery

Dalam Tutorial Ini Kita Tetap Menggunakan Jquery,Seperti Tutorial Yang Sebelumnya Saya Bahas Vertical Sliding Panel Menu With Jquery Sekarang Saya akan bahas Tentang cara membuat Different Top Navigation..

-Berikut cara pembuatannya:
-Seperti biasa silahkan login ke blogger
-Pada dasbor klik Tata Letak ->> Edit Html
-Kemudian Copy Script Jquery Di Bawah ini dan letakan pada Bagian <head> atau di atas code <b:skin><![CDATA[

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

-Setelah Di letakan kemudian tambahkan Code Berikut ini Di Bawahnya:

<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 Code Css Di bawah ini Di atas Code ]]></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;
}
}


.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 --*/

-Kemudian Masukan Code Html Di bawah ini di Bagian Body atau di bawah code <body>

<div id='sub-link-bar'/>



<div id='wrap'>
<div id='main-handle'>
<div class='roundfg'>
<ul id='main-nav'>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a>
<ul class='sub-links'>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com'>Home</a></li>
</ul>

</li>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Tutorials</a>
<ul class='sub-links'>
<li><a href='http://www.reogdesign.co.cc' title='Reog Design'>Design</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial HTML & CSS'>HTML & CSS</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Jquery/' title='View all posts filed under HTML & CSS'>Jquery</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial Blogger'>Blogger</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/' title='Tutorial Wordpress'>Wordpress</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutorial PHP'>PHP</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tutorial%20Blogger' title='Tutirial Java Script'>Java Script</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Tips%20Trik%20Blogger/' title='Tips & Triks'>Tips & Triks</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Articles</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under General'>General</a> </li>

<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Interviews'>Interviews</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under News'>News</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Web Roundups'>Web Roundups</a> </li>
</ul>
</li>
<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Freebies</a>

<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Books'>Books</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Icons'>Icons</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Lightboxes'>Lightboxes</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Others'>Others</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Plugins'>Plugins</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Themes'>Themes</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='View all posts filed under Tooltips'>Tooltips</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>Videos</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Screencasts</a> </li>
</ul>
</li>

<li><a class='main-link' href='http://stylebloggertemplate.blogspot.com/'>About</a>
<ul class='sub-links'>
<li><a href='http://stylebloggertemplate.blogspot.com/' title='Screencasts'>Style Blogger Template</a> </li>
<li><a href='http://reogdesign.co.cc' title='Screencasts'>Reog Design</a> </li>
</ul>
</li>

<li><a class='close' href='#' title='Click to Collapse'/></li>
</ul>
</div>

<b class='round'> <b class='round5'/> <b class='round4'/> <b class='round3'/> <b class='round2'><b/></b> <b class='round1'><b/></b></b> </div>


</div>

-Kemudian Terakhir Save Template Dan Lihat Hasilnya..
-Sumber Referensi:http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/
http://demo-stylebloggertemplate.blogspot.com/

16 komentar:

Koko Bota mengatakan...: Saya Sudah Lihat Demonya MAS...kERENNZZ
langsung coba ahhh...; November 26, 2010
KUNNNNNNNNNNNNNNNNNNN mengatakan...: wah, jago design nih mas, manteb deh :); November 26, 2010
Saia NoerSam mengatakan...: mantap infonya..salam kenal ya sob..; November 26, 2010
R & A mengatakan...: Mantap ne sob :); November 26, 2010
Anonim mengatakan...: kunjungan mlm
salam gss'; November 27, 2010
NTRage03 mengatakan...: wah mnarik kk :) dan blogna simple n bgus :)
bsa ajari kk ?; November 27, 2010
Unknown mengatakan...: kerennnn bangt tutorial jQuery ini sob,,,

kunjungan balik sob,,, salam kenal,,,; November 27, 2010
Suratman Adi mengatakan...: Mantap bro tutor nya...Aq jg mau nyoba ah...Mksh udah berkunjung ke tmpt ku..Lam knl; November 27, 2010
Tomi Purba mengatakan...: wahh manteb banget tutorialnya mas.. itu bs diimplementasikan ke WP gak ya?
o ya sekedar saran, tolong tambahi menu name/url di kotak komentar. kan yg gak punya google account dll jd gak bs koment :D; November 27, 2010
I'm → Botzzz mengatakan...: @all:Thx untuk komentarnya..:)

Jangan Bosan-bosan ya mampir kesini hehhehe..:); November 27, 2010
Belajar CorelDRAW mengatakan...: Keren sob menunya,bisa disave dulu sob..; November 27, 2010
Unknown mengatakan...: Menarik menunya,uji TKP sahabat.; November 27, 2010
Belantara Indonesia mengatakan...: Ini juga, wah mesti ubah menu horizontalku ni....; November 28, 2010
Rizkyzone mengatakan...: q juga dah liht demony sob, tp kalu di akss lewt hp bert g yh, solnya q ngeblog klu pas g diwrnet q paki hp; November 28, 2010
Koko Bota mengatakan...: Keren Sobat....; November 29, 2010
Blogger Manado mengatakan...: kayaknya menarik..langsung coba ahhh...:); November 29, 2010