Membuat Struktur HTML
Susunan menu atau navigasi di dalam suatu web site dapat digambarkan sebagai sistem folder di dalam sistem operasi. Sehingga tag HTML yang paling sesuai untuk membentuk sistem menu adalah list. Dan karena suatu menu didalam web site bukanlah suatu list yang ditentukan urutannya, maka dari
tag HTML list yang paling sesuai adalah unordered list (
). Misalkan kita mempunyai struktur menu sebagai berikut :

Dari struktur menu tersebut dapat kita susun dalam struktur html berikut ini
Membuat Desain Menu
Disini kita tidak akan menjelaskan bagaimana cara membuat desain menu, yang dalam hal ini dibuat dengan Photoshop. Namun yang jelas desain menu yang akan kita buat pada tutorial ini terlihat sebagai berikut :
Menyusun kode CSS
Untuk mempermudah dalam menjelaskan kode CSS yang menyusun menu dropdown ini, kita akan membaginya menjadi 2 tahap yaitu menyusun styles menu utama dan menyusun styles sub menu. Namun sebelum kita memasuki tahap-tahap ini, disini untuk mempermudah penyusunan kode CSS kita lakukan pembersihan terhadap default styles dari browser.Clearing Browser Default Styles
Secara umum pembersihan default styles dari browser dilakukan untuk mempermudah penyusunan kode CSS. Pada tutorial ini kode yang digunakan untuk pembersihan hanya terbatas untuk memenuhi kebutuhan dari penyusunan menu dropdown. Apabila anda tertarik dengan hal ini, maka satu yang disediakan oleh Yahoo (YUI) adalah contoh yang cukup bagus. Berikut kode CSS yang digunakan dalam rangka pembersihan default styles dari browser :body, ul, li {Pada bagian pertama dari kode CSS diatas, kita menghilangkan attribute padding dan margin pada element body, ul dan li. Kemudian dilanjutkan dengan menghilangkan style dari list pada element ul. Terakhir kita mengatur jenis font pada element body, yang kemudian akan diturunkan pada semua element yang menjadi keturunannya. Selain itu, kita juga akan menyediakan suatu CSS class yang dinamakan clearfix. Class ini berfungsi untuk menyelesaikan masalah float, yang kita gunakan untuk menyusun susun horisontal. Hal ini akan menjadi jelas ketika kita menyusun kode CSS. Berikut kode CSS untuk class clearfix ini :
margin: 0;
padding:0;
}
ul {
list-style: none;
}
/* Set font */
body {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
.clearfix:after {Class clearfix ini adalah salah satu metode yang cukup efektif untuk menyelesaikan masalah float. Disini saya tidak akan menjelaskan bagaimana class ini bekerja.
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
display: inline-table;
}
/* Hide for IE-Mac */
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide for IE-Mac */
Mengatur Style Menu Utama
Yang pertama kali kita lakukan untuk mengatur style menu utama adalah memberikan background serta menentukan font dan padding pada kontainer dari menu, berikut ini :#menu {Saya memutuskan untuk menentukan font-size pada bagian kontainer
background: transparent url(bg-menu.gif) repeat-x;
font-size: 12px;
}
#menu>ul {
padding-left: 10px;
}
(ul)
karena pertimbangan bahwa menu ini akan menggunakan ukuran font yang sama serta kenyataan bahwa menu akan menggunakan ukuran static (px) sehingga kita tidak perlu mengkhawatirkan adanya pengaruh ukuran font terhadap ukuran menu. Pada bagian kedua, kita menggunakan selector child yang akan menyamakan element ul
yang secara langsung menjadi turunan/anak dari element #menu
. Kemudian proses dilanjutkan dengan menyusun menu utama agar terlihat horisontal, berikut kode css-nya : #menu>ul>li {Salah satu attribute CSS yang dapat digunakan untuk menyusun elemen HTML secara horisontal adalah
display: inline;
float: left;
line-height: 40px;
}
float
. Attribute float
akan memaksakan suatu elemen untuk mengisi ruang kosong disebelah kanan maupun kiri (tergantung nilai yang diberikan pada attribute ini) dari elemen tersebut. Dengan sifatnya tersebut, membuat element disekitar "flaoted element" ikut terpengaruh sehingga akan sulit dikontrol. Ada beberapa metode yang dapat digunakan untuk menyelesaikan masalah float
ini, namun satu yang paling efektif dalah dengan menggunakan class clearfix
yang telah kita buat sebelumnya. Untuk dapat menggunakannya, kita tambahkan didalam elemen kontainer, sebagai berikut: Yang perlu dilakukan selanjutnya adalah merubah attribute position dari setiap elemen li
menjadi relative
, sebagai berikut : #menu>ul li {Hal ini sangat diperlukan terutama ketika akan memposisikan sub menu. Selanjutnya kita tambahkan sedikit ruang diantara menu utama agar dapat menambah jangkuan klik terhadap link.
position: relative;
}
#menu>ul>li a {Terakhir kita atur style dari anchor/link.
padding: 5px 25px;
}
#menu a {Sampai disini kita telah menyelesaikan penyusunan untuk menu utama
color: #ffffff;
text-decoration: none;
}
#menu>ul>li>a:hover {
color: #99ccff;
}
0 komentar:
Posting Komentar