Membuat horizontal menu dengan CSS
Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).
Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly.
Seperti biasa kita buat file HTMLnya dulu. Isinya kayak gini :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>
</body>
</html>
Kalau diperhatikan, ada tag <ul> sama <li> ya? Tag-tag itu gunanya untuk ngebuat list (klo di Microsoft word itu namanya bullet).
Ngapa kita pake list untuk ngebuat menunya?
Karena agar menu yang kita buat itu lebih search engine friendly. (katanya sich google lebih menyukai situs dengan menu yang seperti itu).
Klo pake list itu khan jelek ya hasilnya (trus ke bawah lagi bukan horizontal). Nah kita pake CSS untuk ngebuat menu itu ke samping (horizontal).
Ini CSSnya :
#nav ul{
display:block;
margin: 0px;
padding: 0px;
}
#nav li{
float:left;
list-style-type:none;
padding:3px 5px 3px 5px;
margin:1px;
border:#CCCCCC 1px solid;
}
#nav li a{
text-decoration:none;
}
#nav li:hover{
background:#00FFFF;
}
Saya jelasin satu-satu ya?
Yang pertama, coba kamu liat di selector #nav ul, di situ ada property display yang valuenya block. Gunanya tuh untuk ngebuat tag <ul> yang tipenya itu adalah inline element ke block element (seperti div).
Update :
tag <ul> itu ternyata merupakan block element, jadi sebenarnya property display nya tidak perlu digunakan. Sorry, saya salah.. Maklum newbie. hehe…
Trus, di selector #nav li ada property float yang gunanya untuk ngebuat menu yang tadinya vertikal menjadi horizontal. Di situ juga ada property list-style-type yang valuenya none gunanya untuk menghilangkan bullet yang ada. Trus ada border buat ngasih bordernya ada margin dan padding juga.
Untuk yang #nav li a, di situ ada property text-decoration valuenya none. Gunanya untuk menghilangkan garis bawah pada linknya (khan secara default tag <a>membuat tulisannya berwarna biru dan bergaris bawah).
Yang terakhir itu selektornya ditambahin :hover, gunanya buat apa?
Jadi gini, selektor yang terakhir khan begini #nav li:hover, nah ketika #nav li nya di sorot sama mouse backgroundnya berubah menjadi biru. (seperti animasi lah)… coba kamu liat yang udah jadinya di sini. Dan juga klo mo download file jadinya di sini.
Update :
#nav li:hover tidak terbaca di IE6, klo tidak salah. Soalnya hover di IE6 cuman untuk tag <a></a> jadi #nav li:hover nya bisa diganti dengan #nav a:hover
Gimana? Setelah di desain pake CSS agak bagus dikit khan tampilannya, walaupun masih standarlah, kamu bisa ngembangin sendiri, misalnya dengan menambahkan gambar sebagai background pada listnya.
mas gmana masangnya kalau css di campur ma html gk bisa ya??? pa kode html hasilnya tidak bisa terbentuk horizontal tolong bantu saya membuat menu
@loeky
maksudnya css dan htmlnya ada dalam satu file ya??
bisa kok,coba mas baca deh artikel saya ini
saya nemu site ini dari google.
saya newbie banget, cuma selama ini bisanya utak-atik blogger aja..
saya tertarik untuk bikin web sendiri.
kira2 mulai dari mana ya.
apa harus blajar CSS?
kl iya site apa yang punya tutorial bagus (inggris ga masalah, gue sehari2 pake inggris kok).
thanks for the info
@ivy
klo untuk awalan sih,kamu coba belajar html dan css dulu,karena dua itu dasarnya,klo situs coba ke http://www.htmldog.com, lumayan buat pemula.
Klo dah menguasai html dan css,baru deh belajar yang lainnya seperti php, javascript, dll.. referensi laen coba ke http://www.w3schools.com/
bisa nggak kita membuat (background) warna gradient dengan css. saya liat warna yang bisa dibuat pada tutorial diatas hanya warna2 solid yang kesannya tidak terlalu stylish. kalo pake warna gradasi kan kelihatan kaya’ tiga dimensi gitu…..Bisa nggak ya….? Soalnya mau hindari pake image yang bikin loading lama….mohon penjelasannya bos, kalo bisa sekalian tutorialnya juga
mas gmana caranya buat link, contohnya kali yang ada di sebuah artikel yang panjang terus di bawahnya ditulis selengkapnya, itu gimana caranya mas, tolong kasih atu donk mas, trimz ya
Adminnya kemana neh….
Aq mo nanya lagi: (jangan bosan2 ya)
web page yang aq buat, kalo di preview di smua browser kelihatannya ok aja, tapi kalo udah di upload ke hosting dan di buka pake IE, halamannya ke kiri (bukan di tengah-tengah browser), kalo pake mozilla halamannya ke tengah tapi sepertinya file cssnya tidak diload, dan kalo pake Opera semua ok hanya tidak bisa load javascriptnya
” KOQ BISA YA ” Apa ada kesalahan ……Mohon pencerahan…
Aq pake Web Builder 2008
Apa fungsinya tag <meta… : seperti di bawah ini?:
Koq gak kelihatan……
@Ira Naf
Sorry gak dibales2 komennya…kemaren2 disibukkan dengan urusan2 kuliah… jadi gak pernah buka2 blog ini lagi…hehe
Setahu saya klo gradien background itu harus pake gambar klo di CSS 2, tapi klo di CSS 3 (versi CSS yang baru) bisa tanpa gambar. Cuman untuk saat ini browser yang mendukung CSS 3 baru sedikit….
Bisa minta file webpage yg kamu buat gak.. siapa tau bisa bantu nyari kesalahannya di mana..
tag metanya gak keliatan,,kyknya kena filter sama form komennya deh..hihi.. Utk meta tag sendiri gunanya macem2 coba kamu ke sini dan ke sini deh
@rio adi
Klo untuk buat link,,pake tag ini :
<a href=”http://alamatsitus”>nama link</a>
klo utk buat read more (selengkapnya)di blogger coba deh ke sini…
Mas aku baru nih di dunia HTML dan PHP terimakasih atas Tutoriannya
untuk style #nav li:hover tidak compatible dengan internet explorer…
ada solusi?
O iya, di IE 6 yang bisa di hover cuman tag <a></a> jadinya #nav li:hover nya diganti #nav a:hover
Good Blog and Good post. Nice can be Visite this blog.
makasih ya atas tutorialnya, saya akan coba dech
kalo saya sihh bisa cuma saya pengen menu nya itu bukan ada di kanan,,saya pingin menu nya ada di tengah itu gimana caranya?????
terus bagaimana caranya kalau merubah warna background dan ukuran tulisan nya gede atau kecil??
ni blog saya biar anda tau kalo menu nya itu ada disebelah kanan,,saya pingin mennu itu ada di tengah!!