Artikel CSS

Artikel CSS (Cascading Stylesheet)
• Home
o » CSS (Cascading Stylesheet)
 » Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
May 26 2008
Ditulis oleh Dhimas Ronggobramantyo

Kategori: CSS (Cascading Stylesheet)
Dibaca 52999 kali
Langsung lihat komentar
Setelah lama tidak menulis artikel baru, kali ini saya akan mengajari tentang membuat horizontal
menu dengan CSS. Ya saya pernah menulis tentang cara membuat horizontal menu sebelumnya,
tapi kali ini kita akan menggunakan images sehingga menu kita akan menarik. Disini kita akan
mempelajari trik CSS tentang Images Sprites dan Images Replacement serta sebagai bonus akan
saya tambahkan animasi dengan memanfaatkan framework JQuery.
Sebelum kita memulainya ada baiknya anda melihat contoh Horizontal Menu yang akan kita
buat. Bagaimana? sudah melihatnya? tertarik? baca terus artikel ini. Menu tersebut dibuat dengan
menggunakan CSS dan teknik Image Replacement dan Image Sprites. Plus Framework JQuery
untuk membuat animasinya. Oke saya tahu anda sudah tidak sabar, kalau begitu langsung saja
kita mulai pembuatannya.
Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai dasar-dasar
HTML dan dasar-dasar CSS terlebih dahulu.
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:
<!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_de
ngan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk
mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>
Silahkan lihat hasilnya disini. 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 <span> didalamnya. Nah tag <span> ini yang
akan kita manfaatkan. Jadi kita melebarkan ukuran tag <span> ini sebesar gambar menunya
untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk
melayout tampilan agar lebih menarik.
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. Sehingga hasilnya sekarang menjadi
seperti ini. Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya.
Tambahkan CSS berikut ini.
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. Sehingga hasilnya
akan berubah seperti ini.
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:
#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;
}
Hasilnya menjadi seperti ini. 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 <span> kita menutupi text nya. Karena kita beri
position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi
dan lebar <span> 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.
#menu_2{
width:91px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_2 span{
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{
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
Image Sprites
Sekarang kita buat efek hovernya dimana kita di hover menggeser images kita 30px kebawah
agar yang tampil adalah images yang lain. Teknik seperti ini kalau orang bule nyebutnya Images
Sprites. Jika anda perhatikan pada gambar tombol diatas maka pada setiap gambar dibawahnya
ada efek hover nya. Nah untuk memindahkan backgroundnya kita gunakan background-
position. Tambahkan kode CSS ini.
#topmenu a:hover span {

background-position:0 -30px;
}
Mudah kan? dan hasilnya seperti ini. Tapi jika anda coba buka di IE 6, ketika kita melakukan
hover maka efeknya berjalan tetapi jika kita sudah tidak dihover gambarnya tetap, tidak berubah.
Terus bagaimana? Jangan pernah anda salahkan browsernya, yang salah tentu yang membuat
kodenya, yaitu kita. Tapi tenang saja akan kita perbaiki. Itu hanya masalah status pada <a>
dimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tenang saja tidak usah panik
tambahkan CSS berikut ini:
a,a:link,a:visited,a:hover {
color:#ff9800;
text-decoration:none;
}
a:focus,a:hover {
text-decoration:underline;
}
Sehingga hasilnya menjadi seperti ini. Sip sudah jalankan, gimana gampang kan? Silahkan anda
coba disemua browser, disemua media (HP, PDA, Screen Reader dll) atau anda matikan images
nya dan matikan CSS nya. Hasilnya pasti tetap bisa terbaca karena kita menggunakan konsep
Web Standards. Kurang puas? ayo kita tambahkan animasi dengan JQuery
Animasi dengan JQuery
Jquery merupakan Framework Javascript yang berisi library-library yang menarik. Salah satunya
adalah animasi. Kenapa saya pilih Jquery? karena JQuery cukup cepat diload dan lebih
kompatibel disemua browser. Framework lainnya yaitu Mootools juga cukup baik, dia cepat di
IE tetapi sangat lambat di Firefox dan memakan resource komputer cukup banyak. Demikian
juga dengan Prototype. Kalau yang ingin lebih cepat, gunakan Dojo, tapi kali ini saya
menggunakan JQuery
Saya menemukan teknik animasi ini pada website Webdesignerwall, pada website tersebut ia
menggunakan tag <em> untuk membuat animasinya. Disini saya mencoba mengubanya
menggunakan tag <div> agar kita bisa lebih menghias text didalamnya dan tentu saja merubah
CSS nya. Oke sebelum mulai, silahkan anda simpan gambar bubble speech dibawah ini, jika
anda tidak suka dengan gambarnya silahkan cari gambar yang lain, karena gambar ini saya buat
sendiri dengan terburu-buru jadi mungkin kurang menarik.
Jika sudah silahkan anda download framework jquery, langsung saja kewebsitenya dan
download filenya (cuma 1 file). Setelah download kita perlu meloadnya dalam HTML. Sekarang
ubah kode HTML anda menjadi seperti ini:
<!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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topmenu a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");
});
});
</script>
</head><body>
<h1>Contoh Horizontal Menu</h1>
<ul id="topmenu">
<li><a href="#" class="replace" id="menu_1"
title="Home"><span></span>Home</a><div>Kembali ke halaman utama</div></li>
<li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a><div>Baca
Artikel Terbaru</div></li>
<li><a href="#" id="menu_3" title="About Me"><span></span>About
Me</a><div>Tentang Pemilik Website</div></li>
</ul>
<div id="container">
<p>Baca artikel tentang <a
href="http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_de
ngan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk
mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>
Jika anda lihat pada bagian atas kita meload jquery.js yang merupakan framework Jquery dan
kita menambahkan kode:
$(document).ready(function(){
$("#topmenu a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");
});
});
Fungsi tersebut berarti kita menginisialisasikan efek hover pada #topmenu a didalam CSS.
Dimana apabila kita menemukan tag <div> setelah #topmenu a maka kita animasikan dengan
mengurangi jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka
setiap menu sekarang ada tag <div> yang berisi informasi mengenai menu tersebut. Nah dengan
bantuan CSS maka kita akan hilangkan menu tersebut. Masukkan kode CSS berikut ini:
#topmenu li div {
font-size:11px;
background:url(bubble.gif) no-repeat;
width: 80px;
height: 33px;
position: absolute;
text-align: center;
z-index: 2;
display: none;
text-align:center;
padding:10px 5px;
top:-40px;
left:0;
}
Yang perlu diperhatikan pada CSS ini adalah, kita menghilangkannya dengan display: none;
dan memberinya position:absolute; dan z-index: 2; agar posisinya diatas yang lainnya.
Karena posisi nya absolute maka container dibawahnya diberi position:relative; (pada
#topmenu li). Jika anda ingin mengubah posisi munculnya animasi, anda dapat mengubah nilai
top pada CSS dan nilai top pada javascript nya.
Selesai sudah, dan hasilnya seperti ini. Gampang kan?

Artikel CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Artikel CSS

Uploaded by

Copyright:

Available Formats

Artikel CSS (Cascading Stylesheet)

Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi

Ditulis oleh Dhimas Ronggobramantyo

Langsung lihat komentar

Membuat HTML yang Standard untuk Menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Sekarang mari kita mulai buat CSS nya.

Hasilnya menjadi seperti ini. Jika anda lihat kita menentukan

#topmenu a:hover span {

Animasi dengan JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Selesai sudah, dan hasilnya seperti ini. Gampang kan?

You might also like