Membuat Menu Navigasi dengan Efek Hover Menggulung

 

Kali ini Saya hanya akan menggunakan CSS3 Transisi untuk menganimasikan efek menggulung tiap item,yang sebelumnya Miev juga belajar dari sobatMiev yaitu mas Taufik Nurrohman,jika sobatMiev penasaran dan ingin mencobanya silahkan,dan Miev sudah mengujinya dan berhasil,sayang Miev tidak bia tampilkan di blog ini di karenakan terlalu banyak CSS di blog ini,dan itu akan memberatkan blog ini,

Untuk membuatnya, 

1. masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak seperti ini:

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

Jika template sobatMiev sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode Setelah itu salin script dibawah ini, lalu letakkan tepat di bawah script tadi:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#topnav li").prepend("<span></span>");
    $("#topnav li").each(function() {
        var linkText = $(this).find("a").html();
        $(this).find("span").show().html(linkText);
    });
    $("#topnav li").hover(function() {
        $(this).find("span").stop().animate({
            marginTop: "-40"}, 250);},
    function() {
        $(this).find("span").stop().animate({
            marginTop: "0"}, 250);
    });
});
//]]>
</script>

Jika sudah, sekarang kita masuk ke tahap pemodelan. Salin kode CSS ini, kemudian letakkan di atas kode ]]> atau :

ul#topnav { margin:30px; padding:0; list-style-type:none; float:left; font-size:1em; } ul#topnav li { margin:0; padding:0; overflow:hidden; float:left; height:40px; } ul#topnav a, ul#topnav span { padding:10px 20px; float:left; text-decoration:none; color:#fff; background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; text-transform:uppercase; clear:both; width:100%; height:20px; line-height:20px; } ul#topnav a { color:#555; background-position:left bottom; } ul#topnav span { background-position:left top; }

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode di bawah ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='topnav'>
    <li><a href='#'>Beranda</a></li>
    <li><a href='#'>Profil</a></li>
    <li><a href='#'>Portfolio</a></li>
    <li><a href='#'>Komentar</a></li>
    <li><a href='#'>Kontak</a></l>
    <li><a href='#'>Bantuan</a></li>
</ul>

Simpan template sobatMiev.

Posted in: menu