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
- dan
- . 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>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 ( - ) memiliki
idyang 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 tagdidalamnya. Nah tagini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tagini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik.KODE PROGRAMbody {
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 untukdan 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.KODE PROGRAMul {
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- . Kemudian untuk
- nya kita beri
float:left;agar menu nya kesamping. Sertaposition: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 nyamenu_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;
}
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 spankita beri background yang berisi images dari menu_1.jpg dan jangan lupaposition:absolute;agarkita menutupi text nya. Karena kita beriposition:absolute;maka container dibawahnya kita beriposition:relative;. Untuk tinggi dan lebarkita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkancursor:pointeragar 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;
}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 gunakanbackground-position. Tambahkan kode CSS ini.KODE PROGRAM
#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 padadimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tenang saja tidak usah panik tambahkan CSS berikut ini:KODE PROGRAM
a,a:link,a:visited,a:hover {
color:#ff9800;
text-decoration:none;
}
a:focus,a:hover {
text-decoration:underline;
}Animasi dengan JQuery
Saya menemukan teknik animasi ini pada website Webdesignerwall, pada website tersebut ia menggunakan taguntuk membuat animasinya. Disini saya mencoba mengubanya menggunakan tagagar 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: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>
<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_dengan_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:KODE PROGRAM
$(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 tagsetelah #topmenu a maka kita animasikan dengan mengurangi jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka setiap menu sekarang ada tagyang berisi informasi mengenai menu tersebut. Nah dengan bantuan CSS maka kita akan hilangkan menu tersebut. Masukkan kode CSS berikut ini:KODE PROGRAM
#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 dengandisplay: none;dan memberinyaposition:absolute;danz-index: 2;agar posisinya diatas yang lainnya. Karena posisi nya absolute maka container dibawahnya diberiposition: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?
#topmenu(sebenarnya sama aja,#topmenuitu sama dengan- , tapi saya lebih senang memisahnya) kita berikan tinggi 30px
height:30px;. Jangan lupa untuk - nya kita beri
0 komentar:
Posting Komentar