Horizontal Scrolling Menu dibuat dengan CSS dan jQuery

Diposting oleh rizalfauzan's blog di 04.47
Ada banyak menu bergulir flash keren di luar sana, tapi aku memutuskan untuk membuat menu sama mencari hanya dengan CSS dan jQuery. Aku tidak dapat mencapai kelancaran sama dalam animasi, tapi tetap aku benar-benar puas dengan hasilnya. menu saya bekerja baik di semua browser utama dan degradasi anggun ketika Javascript dimatikan.
Jika anda membutuhkan versi vertikal menu bergulir, silakan kunjungi tutorial baru saya.


  • Membuat markup
Mari kita mulai dengan membuat struktur HTML yang diperlukan. Kita akan menggunakan daftar unordered dengan masing-masing item daftar berisi gambar dan keterangan. Kami juga akan menambahkan elemen wrapper tambahan.

<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="Scrolling"/><span>Scrolling</span>
    </a></li>
    <li><a href="#">
      <img src="img/4.jpg" alt="jQuery"/><span>jQuery</span>
    </a></li>
  </ul>
</div>
  • Menambahkan styling dasar
Sekarang kita perlu menambahkan beberapa beberapa aturan CSS. 

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  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 {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
"lebar" dan "overflow" properti yang digunakan untuk menambah sebuah bar-gulir ke wrapper div. Kami mengatur "posisi" properti untuk perhitungan offset lebih mudah dengan Javascipt. Jangan lupa bahwa offset selalu dihitung relatif terhadap posisi orangtua. Anda dapat melihat apa yang telah kami lakukan sejauh ini di sini

  • Menambahkan efek hover dan perbatasan

"display: none" menyembunyikan properti keterangan, dan kami akan menambahkan "display: block" untuk ": hover" aturan untuk menunjukkan mereka ketika mouse di atas gambar.
The "-webkit-border-radius" dan "-moz-border-radius" properti menambahkan sudut dibulatkan untuk Firefox, Safari dan Chrome. Sayangnya, Internet Explorer tidak mendukung dan akan menampilkan sudut biasa sebagai gantinya.
Begitulah menu akan terlihat jika Javascript dinonaktifkan. 

.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;
}
  • jQuery
 
Kami akan perlu menambahkan jQuery untuk dokumen pertama kami. Saya menggunakan versi-host di Google API, karena sering sudah tersimpan dalam cache browser yang terasa mengurangi waktu load halaman. 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
Berikut adalah apa yang harus Anda tahu untuk memahami kode:
$ () Adalah singkatan untuk $ (dokumen) yang siap (.), Fungsi jQuery yang paling umum digunakan. Hal ini memungkinkan Anda untuk mengikat fungsi yang akan dijalankan ketika dokumen DOM telah selesai loading. 
$(function(){
  // Your code here
});
Kami akan menggunakan "mousemove" Acara untuk mengikat fungsi yang akan ditembakkan saat mouse digerakkan di atas menu.
The "ul.width ()" tidak mengembalikan lebar sesungguhnya dari semua gambar, karena kita telah menetapkan daftar unordered lebar dengan CSS untuk membuat semua gambar yang ditampilkan dalam 1 baris. Kita bisa mendapatkan lebar lebar sebenarnya menambahkan daftar item terakhir untuk itu kiri offset.
Kami akan menggunakan "lastLi [0]" untuk mendapatkan elemen DOM dari koleksi jQuery dan "offsetLeft" untuk mendapatkan posisi tepi kiri atas item daftar relatif untuk wrapper div.
Acara's "pageX" atribut mengembalikan horizontal koordinat mouse relatif terhadap dokumen, tetapi kita perlu posisi relatif terhadap div wrapper, jadi kita akan mengurangi "div.offset (). Kiri" dari itu.
Daftar harus gulir lebih cepat daripada mouse digerakkan untuk membuat yang kita gunakan "(ulWidth-divWidth) / divWidth" proporsi.
Berikut adalah Javascript yang:

$(function(){
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 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);
    });
});
Kita sudah selesai! Anda sekarang dapat melihat hasil akhir.
 

Label: ,