Membuat Menu Scrolling Horizontal CSS dan jQuery

Ada banyak macam menu berjalan atau flash yang
pernah kita jumpai. Dari mulai yang sederhana sampai
kepada yang keren. Untuk menu flash ini dibuat dengan
menggunakan CSS dan jQuery. Anda dapat melihat
dan memilih gambar pada menu flash ini hanya dengan
menggerakkan cursor anda. Lihat DEMOnya di sini.

Berikut ini cara membuatnya :

1.   Masuk ke Edit HTML

2.   Carilah kode </head>

3.   Letakkan kode berikut di atasnya.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script><br /> <style type="text/css"> body { padding: 50px 0 0 50px; } div.sc_menu { /* Set it so we could calculate the offsetLeft */ position: relative; height: 145px; width: 500px; overflow: auto; } ul.sc_menu { display: block; height: 110px; /* max width here, for users without javascript */ width: 1500px; padding: 15px 0 0 15px; /* removing default styling */ margin: 0; background: url('navigation.png'); list-style: none; } .sc_menu li { display: block; float: left; padding: 0 4px; } .sc_menu a { display: block; text-decoration: none; } .sc_menu span { display: none; margin-top: 3px; text-align: center; font-size: 12px; color: #fff; } .sc_menu a:hover span { display: block; } .sc_menu img { border: 3px #fff solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .sc_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; } /* Here are styles for the back button, don't look at them */ #back { display: block; width: 500px; text-align: center; color: #003469; font-size: 16px; } </style><br /> <script type= "text/javascript">/*<![CDATA[*/ $(function(){ //Get our elements for faster access and set overlay width var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15; //Get menu width var divWidth = div.width(); //Remove scrollbars div.css({overflow: 'hidden'}); //Find last image container var lastLi = ul.find('li:last-child'); //When user move mouse over menu div.mousemove(function(e){ //As images are loaded ul width increases, //so we recalculate it each time var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth; div.scrollLeft(left); }); }); /*]]>*/</script>

4.   Cari lagi kode </body>

5.   Letakkan kode berikut, juga di atasnya.

6.   Atau bisa juga anda letakkan kodenya
      pada gadget HTML/JavaScript.

<div class="sc_menu"> <ul class="sc_menu"> <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li> <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li> <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li> <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li> <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li> <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li> <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li> <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li> </ul><br /> </div>

KETERANGAN =

*   Ganti URL alamat dan URL gambarnya
    dengan yang anda miliki.

*   Ganti juga kata keterangan gambarnya
    dengan kata yang anda inginkan.

*   Pada kode yang diletakkan di atas </head>
    anda bisa atur width & heightnya, untuk
    disesuaikan dengan gambar milik anda.

Selamat Mencoba,

sukses selalu, good luck!