Membuat Menu Navigasi dengan Efek Hover Menggulung

Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu:

Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cariscript yang tampak seperti ini:

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

Jika templatemu 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 </head>

Setelah itu salin script 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 ]]></b:skin> atau </style>:

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></li> 
    <li><a href='#'>Bantuan</a></li> 
</ul>

pelajari lebih lanjut disini.



sumber:

http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/