Family Of Locos: Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi

Membuat HTML yang Standard untuk Menu

Pada artikel sebelumnya saya sudah mengajari bagaimana membuat menu yang baik, kita akan menggunakan konsep yang sama, karena memang teknik tersebutlah yang dianjurkan untuk membuat menu. Jadi kita menggunakan tag HTML `<ul>` dan `<li>`. Oke anda pasti sudah tahu mengenai tag HTML ini, langsung saja kita buat kode HTMLnya terlebih dahulu:

KODE PROGRAM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Contoh Horizontal Menu</title>
</head>
<body>
<h1>Contoh Horizontal Menu</h1>
<ul id="topmenu">
<li><a href="#" class="replace" id="menu_1" title="Home"><span></span>Home</a></li>
<li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a></li>
<li><a href="#" id="menu_3" title="About Me"><span></span>About Me</a></li>
</ul>
<div id="container">
<p>Baca artikel tentang <a href="http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>

Sudah terlihat kan bentuk menunya, ya masih biasa karena kita belum menstyle nya dengan CSS. Oke jika anda perhatikan untuk tiap menu (<li>) memiliki id yang berbeda-beda. Kenapa? karena setiap menu panjang imagenya berbeda, maka CSS nya juga berbeda-beda untuk tiap menunya. Sebelum kita mulai membuat CSS nya silahkan anda save gambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.

Sekarang mari kita mulai buat CSS nya.

Image Replacement

Image Replacement merupakan sebuah teknik dimana kita mereplace text yang ada dengan image menggunakan CSS. Teknik ini berguna apabila kita menginginkan teks dengan font yang aneh ataupun text dengan efek-efek yang tidak mungkin bisa dilakukan dengan CSS.

Jika anda perhatikan pada setiap menu, ada tag  didalamnya. Nah tag  ini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tag  ini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik.

KODE PROGRAM

body {
  font-family:arial, serif;
}
#container {
  border:1px solid #ffbc58;
  padding:10px;
  background:#ffe9c8;
}

Anda tentu sudah tahu fungsi CSS diatas, kita hanya memberikan font jenis arial untuk <body> dan memberi border serta background untuk #container.Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya. Tambahkan CSS berikut ini.

KODE PROGRAM

ul {
  list-style:none;
  margin:0;
  padding:0;
}
#topmenu {
  height:30px;
}
#topmenu li {
  float:left;
  position:relative;
}

Pada CSS tersebut kita menghilangkan padding dan margin serta bullet

(list-style:none;) pada tag <ul>. Kemudian untuk #topmenu

(sebenarnya sama aja, #topmenu itu sama dengan <ul>,

tapi saya lebih senang memisahnya)

kita berikan tinggi 30px height:30px;. Jangan lupa untuk <li>

nya kita beri float:left; agar menu nya kesamping. Serta position:relative;

yang akan berguna untuk animasinya yang akan saya jelaskan belakangan.

Jika anda lihat maka menunya telah menyamping dan dempet-dempet. Sekarang mari kita ubah menjadi images dengan teknik Image Replacement. Kita akan mengubah menu home nya terlebih dahulu, dan jika anda lihat pada kode HTML nya, pada bagian home id nya menu_1. Tambahkan CSS berikut ini:

KODE PROGRAM

#menu_1{
  width:70px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_1 span{
  background:url(menu_1.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}

Jika anda lihat kita menentukan width dan height untuk menu_1.
Jika anda lihat gambar menu_1.jpg diatas mungkin anda bertanya-tanya,
width nya memang benar 70px tapi height nya kan 60px? kenapa di CSS nya
height nya 30px? Ya karena yang ingin kita tampilkan adalah 30px bagian
atas. 30px bagian bawah kita tampilkan waktu hover.

Pada #menu_1 span kita beri background yang berisi images dari menu_1.jpg dan jangan lupa position:absolute; agar  kita menutupi text nya. Karena kita beri position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi dan lebar  kita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkan cursor:pointer agar di browser IE mousenya berubah. Begitulah kira-kira trik Image Replacement. Mudah kan, lakukanlah hal yang sama untuk menu sisanya, tentu saja width nya berbeda. Tambahkan kode CSS berikut ini untuk menu lainnya.

KODE PROGRAM

#menu_2{
  width:91px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_2 span{
  background:url(menu_2.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}
#menu_3{
  width:103px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_3 span{
  background:url(menu_3.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}

THANKS TO : www.dhimasronggobramantyo.com

Family Of Locos

Selasa, 19 April 2011

Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi

Membuat HTML yang Standard untuk Menu

KODE PROGRAM

Image Replacement

Tidak ada komentar:

Posting Komentar

Mengenai Saya

ARTIKEL MY BLOG