mr.d0wer
Redaksi
Jumlah posting : 1080
Join date : 14.09.09
Age : 35
Lokasi : MERAK-INDRAMAYU
 | Subyek: Membuat Horizontal Menu CSS, Images Sprites dan Animasi  Mon Sep 14 2009, 09:51 | |
| Menu nih dibuat dengan menggunakan CSS dan teknik Image Replacement dan Image Sprites. Plus Framework JQuery untuk membuat animasinya. Nah sebaiknya daripada bingung nanti lo pelajarin coding html aja dari pada mumet-mumet baca artikel nih  Membuat HTML Standard untuk Menunah sebelumnya jgua lo musti tahu bagaimana teknik pembuatan menu yang baik jg. Jadi nanti menggunakan tag HTML dan - . Misal code HTML menunya:
- Code:
-
<!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>Silahkan Click<a href="http://freezerland.org">Freezerland</a></p> </div> </body> </html>
Sudah lo lihat hasil coding html di atas?masih biasakan?coz ntuh belum lo modif pake CSS Style. Oke jika lo perhatiin untuk tiap menu ( - ) 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 silahken lo simpengambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.
  
Image Replacement
Image Replacement merupakan sebuah teknik dimana nanti 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 lo perhatiin 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.
- Code:
-
body {
font-family:arial, serif;
}
#container {
border:1px solid #ffbc58;
padding:10px;
background:#ffe9c8;
}
Lo pasti tahu fungsi CSS diatas, nah kita hanya memberikan font jenis arial untuk dan memberi border serta background untuk #container. Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya. Tambahkan CSS berikut ini.
- Code:
-
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 . Kemudian untuk #topmenu (sebenarnya sama aja, #topmenu itu sama dengan , tapi gw lebih senang memisahnya) kita berikan tinggi 30px height:30px;. Jangan lupa untuk - 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 nantinya.
Jikalo lihat lagi 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:
- Code:
-
#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 lo 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.
- Code:
-
#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 gunakan background-position. Tambahkan kode CSS ini.
- Code:
-
#topmenu a:hover span {
background-position:0 -30px;
}
Tapi jika nanti lo 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 dimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tinggal aja tambahkan CSS berikut ini:
- Code:
-
a,a:link,a:visited,a:hover {
color:#ff9800;
text-decoration:none;
}
a:focus,a:hover {
text-decoration:underline;
}
Animasi dengan JQuery
Jquery merupakan Framework Javascript yang berisi library-library yang menarik. Salah satunya adalah animasi. 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 gw gunain JQuery
Nih teknik dari webdesignerwall, pada website tersebut ia menggunakan tag untuk membuat animasinya. Disini gw mencoba mengubanya menggunakan tag agar kita bisa lebih menghias text didalamnya dan tentu saja merubah CSS nya. Oke sebelum mulai, silahkan lo simpan gambar bubble speech dibawah ini. Atau lo juga bisa bikin sendiri yang lebih menarik.  Jika sudah silahkan lo download framework jquery, langsung saja kewebsitenya dan download filenya (cuma 1 file). Setelah download kita perlu meloadnya dalam HTML. Sekarang ubah kode HTML lo menjadi seperti ini: - Code:
-
<!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>Silahkan Click <a href="http://www.freezerland.org">Freezerland</a></p> </div> </body> </html> Jika lo lihat pada bagian atas kita meload jquery.js yang merupakan framework Jquery dan kita menambahkan kode: - Code:
-
$(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 setelah #topmenu a maka kita animasikan dengan mengurangi jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka setiap menu sekarang ada tag yang berisi informasi mengenai menu tersebut. Nah dengan bantuan CSS maka kita akan hilangkan menu tersebut. Masukkan kode CSS berikut ini: - Code:
-
#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 lo ingin mengubah posisi munculnya animasi, lo bisa mengubah nilai top pada CSS dan nilai top pada javascript nya. jadi nanti total seluruh codingnya seperti dibawah nih - Code:
-
<!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> <style type="text/css" media="all"> body { font-family:arial, serif; } a,a:link,a:visited,a:hover { color:#ff9800; text-decoration:none; } a:focus,a:hover { text-decoration:underline; } ul { list-style:none; margin:0; padding:0; } #topmenu li { float:left; position:relative; } #container { border:1px solid #ffbc58; padding:10px; background:#ffe9c8; } #topmenu { height:30px; } #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; } #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; } #topmenu a:hover span { background-position:0 -30px; } #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; } </style> <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>Silahkan Click <a href="http://www.freezerland.org">Freezerland</a></p> </div> </body> </html>  dah segitu aje, moga bisa nambahin modif website lo yang penting sebelumnya lo musti referensi JS,HTML,dan CMS kalo lo gunain joomla tapi gw juga belum tahu apa bisa di modef kalo pake joomla, tp kayaknya bisa tapi agak kesulitan, coz di joomla hampir semua codingnya gunain JS[/align]  | |
|
Calendar
