The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

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(){
$(&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 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;
}
}

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






-Kemudian Masukan Code Html Di bawah ini di Bagian Body atau di bawah code <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://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 &amp; CSS'>HTML &amp; CSS</a> </li>
<li><a href='http://stylebloggertemplate.blogspot.com/search/label/Jquery/' title='View all posts filed under HTML &amp; 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 &amp; Triks'>Tips &amp; 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>
<!-- 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 -->




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

ARTIKEL TERKAIT



17 komentar:

Koko Botax mengatakan...

Saya Sudah Lihat Demonya MAS...kERENNZZ
langsung coba ahhh...

Se7enTime mengatakan...

wah, jago design nih mas, manteb deh :)

http://www.ayobaca.com mengatakan...

mantap infonya..salam kenal ya sob..

Rhan-D mengatakan...

Mantap ne sob :)

genksukasuka mengatakan...

kunjungan mlm
salam gss'

aciid !!!!!! mengatakan...

wah mnarik kk :) dan blogna simple n bgus :)
bsa ajari kk ?

Asis Sugianto mengatakan...

kerennnn bangt tutorial jQuery ini sob,,,

kunjungan balik sob,,, salam kenal,,,

WONG SIKAMPUH ngoceh mengatakan...

Mantap bro tutor nya...Aq jg mau nyoba ah...Mksh udah berkunjung ke tmpt ku..Lam knl

argunbdg mengatakan...

wow... mantab abis dech tutorialnya!!!
sukses yach bRo... :D

*kunjungan balik dari http://argunbdg.com

tomipurba 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

Botzzz mengatakan...

@all:Thx untuk komentarnya..:)

Jangan Bosan-bosan ya mampir kesini hehhehe..:)

Belajar CorelDRAW mengatakan...

Keren sob menunya,bisa disave dulu sob..

Suparyanto mengatakan...

Menarik menunya,uji TKP sahabat.

Belantara Indonesia mengatakan...

Ini juga, wah mesti ubah menu horizontalku ni....

Rizky2009 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

Koko Bota mengatakan...

Keren Sobat....

Blogger Manado mengatakan...

kayaknya menarik..langsung coba ahhh...:)

Posting Komentar