arman.sleepyhead@rocketmail.com. Diberdayakan oleh Blogger.
RSS
Container Icon

Membuat Animated Top Navigation Menu

Posting kali ini berisi bagaimana cara membuat top navigasi menu denga efek animasi, yang kalau ada mouse di atasnya tanpa di klik pun navigasi tersebut seakan menggulung ke atas. Untuk lebih jelasnya kamu bisa melihat contohnya di sini. Perhatikan navigasi atas di blog itu.


Cara membuat top navigasi yang seperti itu di butuhkan struktur kode sebagai berikut


Struktur HTMLnya seperti berikut


/*--HTML--*/ 
<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Ini adalah menu yang nantinya akan tampil di blog kamu, jadi bisa kamu ganti isinya sesuai blog kamu




Selanjutnya adalah struktur CSS, CSS ini gunanya untuk mengatur background gambar, background hover dan warna huruf dari menu kita nanti.


/*--CSS--*/ 
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: white;
background: url(*) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: white;
background-position: left bottom;
background: url(http://i1191.photobucket.com/albums/z464/izoel1/topnav.png) repeat-x;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}


Pada struktur CSS di atas warna background saya samakan dengan blog contoh, kamu bisa mengganti warna backgrounnya dan warna hurufnya.




Animation JQuery, ini di butuhkan untuk mengatur efek animasi menu kamu nantinya


/*--jquery--*/ 
<script src='http://izoel.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
.


Dan yang terakhir adalah pengaturan script di template kamu :


/*--javascript--*/ 
$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;);
$(&quot;#topnav li&quot;).each(function() {
var linkText = $(this).find(&quot;a&quot;).html();
$(this).find(&quot;span&quot;).show().html(linkText);
});


$(&quot;#topnav li&quot;).hover(function() {
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot;
}, 250);
} , function() {
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot;
}, 250);
});


});
.


Sekarang saya akan menjelaskan pemasangan pada blogger, caranya kamu masuk ke blogger >>Design >> Edit HTML >> beri tanda centang di opsi expand widget template.




Sekarang cari kode <head> letakan kode /*--jquery--*/ setelah atau di bawahnya kode <head>.
Selanjutnya kamu cari kode ]]></b:skin> dan kamu letakkan struktur css *--CSS--*/ tepat di atas atau sebelum kode ]]></b:skin>.
Selanjutnya kamu cari kode </body> lalu kamu letakan kode javascript /*--javascript--*/  di atas atau sebelum kode </body>. "dimasukkan" di dalam <script></script>
Simpan template kamu.




Langkah terakhir kamu keluar dari edit HTML dan masuk ke page elements, pilih add a gadget, kemudian kamu pilih menu HTML/JavaScript dan kamu masukkan struktur kode /*--HTML--*/di dalam kotak, kemudian simpan.
Sekarang lihat blog kamu.


Selamat mencoba, semoga berhasil.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar

silakan coment saja

Related Posts Plugin for WordPress, Blogger...