Menu Navigasi dengan Teknik CSS Sprites

Teknik CSS Sprites ini sangat berguna untuk template yang menggunakan banyak image. Dengan teknik ‘CSS Sprites’ ini akan mempercepat “loading” dan “http request” pada image, sebab beberapa image di template tersebut dikombinasikan dalam satu file image, oleh karenanya image tersebut hanya dipanggil satu kali.

Sebelum lanjut, lihat demo penggunaan teknik CSS Sprite pada menu navigasi. Arahkan mouse anda dan klik, untuk melihat hasil dari teknik tersebut.

Apabila anda menggunakan Browser Firefox, pada demo tersebut, klik kanan pilih view page info, kemudian klik media, untuk melihat image yang digunakan pada menu tersebut.

Penjelasan Teknik CSS Sprites dalam Membuat Menu Navigasi

Sesuai demo diatas, berikut ini tahapan pembuatannya:

1. Image Menu Navigasi

Gambar dibawah ini adalah image yang digunakan pada demo diatas. Gambar tersebut adalah gabungan dari beberapa image yang dibutuhkan untuk menu navigasi, yang nantinya dipilah-pilah dengan teknik CSS.

Contoh Image Menu Navigasi dengan CSS Sprites

Berikut ini penjelasan gambar tersebut:

Penjelasan Image Menu Navigasi dengan CSS Sprites

Gambar yang akan difungsikan sebagai menu navigasi ini terdiri dari tiga bagian, yaitu ‘home‘, ‘about‘ dan ‘contact‘. Masing-masing bagian tersebut memiliki lebar yaitu 80 pixel dan tinggi 30 pixel. Lebar dan tinggi image tersebut yang penting diperhatikan, sebab itu menjadi penentu dalam pembagiannya dengan teknik CSS.

Dari tiga bagian menu tersebut, kemudian dibagi lagi berdasarkan fungsinya yaitu untuk link hover dan link focus, yang dibedakan berdasarkan warna, sesuai gambar diatas.

2. Kode HTML Menu Navigasi

Kode HTML yang digunakan untuk menu navigasi ini ada tiga bagian, seperti dijelaskan pada gambar diatas, yaitu home, about dan contact. Maka penulisan kode HTML nya sebagai berikut:

<ul id="menu">
  <li class="home"><a href="#">Home</a></li>
  <li class="about"><a href="#">About</a></li>
  <li class="contact"><a href="#">Contact</a></li>
</ul>

Yang perlu diperhatikan pada kode html diatas, bahwa tiap menu tersebut menambahkan atribut seperti class(lihat kode yang berwarna biru diatas). Contoh pada menu ‘home’ diatas menggunakan class="home". Penambahan atribut tersebut yang nanti akan berfungsi untuk memilah bagian image tersebut di kode CSS.

3. Kode CSS Menu Navigasi dengan Teknik Sprites

Kode CSS ini adalah bagian penting dari teknik sprites, untuk memilah-milah image tersebut. Kata kunci dari teknik ini adalah pada property background position.

Sebelum masuk ke kode CSS keseluruhan. Berikut ini contoh penjelasan dari teknik ini. Misal pada menu ‘home‘, <li class="home"><a href="#">Home</a></li>, maka CSS nya sebagai berikut:

li.home a{
   width:80px;
   height:30px;
   display:block;
   text-indent:-9999px;
   background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 top no-repeat;
   }

Penjelasan kode CSS diatas:

width:80px; dan height:30px;, seperti pada penjelasan gambar diatas, bahwa lebar dan tinggi masing-masing image tersebut, seperti ‘home’, lebar 80 pixel dan tinggi 30 pixel.

display:block;, sebagai penegas untuk mem-block image tersebut yang memiliki tinggi dan lebar.
text-indent:-9999px;, untuk menyembunyikan text ‘home’, sebab dalam image tersebut sudah memiliki text home.

Sedangkan, background: url(http:../menu.png) 0 top no-repeat; :
url(http:../menu.png) ini adalah alamat image yang digunakan.
0 top, kode yang berwarna biru tersebut adalah value dari property background position dan ini kunci untuk memilah gabungan gambar tersebut yang memiliki tinggi dan lebar, seperti penjelasan diatas.
no-repeat;, ini adalah value dari property dari background-repeat, yang maksudnya image tersebut tidak diulang penggunaannya.

Pada background position 0 top itu bisa juga di tulis 0 0 atau juga left top, artinya image tersebut berada pada bagian kiri (senilai 0) atas (senilai 0). Jadi nilai pertama itu adalah koordinat x dan kedua adalah y. Ingat, angka atau value dari background position ini terkait perhitungan lebar dan tinggi image masing-masing menu diatas.

Kemudian untuk link:hover pada menu home kita cukup memanggilnya sebagai berikut:

li.home a:hover {
   background-position:0 -30px;
   }

background-position:0 -30px;, artinya memanggil image dibagian kiri (senilai 0) atas (senilai -30px). Angka -30px tersebut diperoleh karena masing-masing gambar memiliki tinggi 30 pixel, maka tempat image untuk hover (warna urutan kedua digambar atas) tersebut berada di -30 pixel dan untuk link focusnya nanti adalah senilai -60 pixel.

Anda dapat mempelajari dan menguji coba mengenai property background position ini di CSS background-position Property.

Maka keseluruhan kode CSS untuk menu navigasi dengan teknik “CSS Sprites” ini adalah:

ul#menu {
     /* isi sesuai penempatan atau posisi menunya */
  }

ul#menu li {
  float:left;
  margin-right:10px;
   list-style:none;
  }
ul#menu li a{
   width:80px;
   height:30px;
   display:block;
   text-indent:-9999px;
   background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 0 no-repeat;
   }
ul#menu li.home a{
   background-position:0 0;
}
ul#menu li.home a:hover {
   background-position:0 -30px;
   }
ul#menu li.home a:focus {
   background-position:0 -60px;
   }

ul#menu li.about a{
   background-position:-80px 0;
   }
ul#menu li.about a:hover {
   background-position:-80px -30px;
   }
ul#menu li.about a:focus {
   background-position:-80px -60px;
   }

ul#menu li.contact a{
   background-position:-160px 0;
   }
ul#menu li.contact a:hover {
   background-position:-160px -30px;
   }
ul#menu li.contact a:focus {
   background-position:-160px -60px;
   }

Penutup

Sip. Demikian keseluruhan penjelasan mengenai Menu Navigasi ini dengan tekniks CSS Sprites. Untuk pengembangannya lebih lanjut anda dapat mempelajari di artikel berikut: