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).

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.

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.

Populerkan artikel ini