Cara Lain Membuat Horizontal Menu dengan CSS

posted by hisman in January 11th, 2010

Sebelumnya, saya pernah membahas tentang cara membuat menu horizontal dengan css. Pada artikel tersebut, menunya dibangun dengan list (di htmlnya) yang sejatinya terlihat ke bawah (vertikal) tidak horizontal. Nah, css-nya yang membuat menu itu menjadi terlihat horizontal, di artikel itu menggunakan teknik float. Lebih lengkapnya silahkan kunjungi aja artikelnya.

Nah, kali ini kita akan coba membuat menu horizontal juga tapi dengan cara yang sedikit berbeda dengan artikel sebelumnya. Untuk menunya, tetap menggunakan list, yang berbeda hanya pada css-nya saja, terutama teknik yang digunakan untuk membuat tampilan menunya menjadi horizontal.

Oke, untuk contohnya kita buat dua file yang pertama adalah file index.html untuk isi htmlnya dan file style.css untuk cssnya.

Isi file index.html nya seperti ini :


<!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" lang="en">

<head>
  <title>Horizontal Menu (Cara Lain)</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <ul id="nav">
    <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>
</body>

</html>

trus untuk isi file style.css :


#nav li {
  display: inline;
}

#nav a {
  padding:3px 5px 3px 5px;
  border: 1px solid #ccc;
  text-decoration: none;
}

#nav a:hover{
  background: #00FFFF;
}

Yup, kira-kira gitu isinya. Trus, penjelasannya kira-kira gini :

Pertama untuk yang file index.html nya :

Hampir sama dengan cara yang pertama, tetap memakai list untuk menunya. Listnya :

  <ul id="nav">
    <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>

Trus, untuk memanggil file style.css menggunakan ini :


<link rel="stylesheet" href="style.css" type="text/css" />

Nah, sekarang yang file style.css nya. Di sini mungkin yang akan sedikit berbeda. Intinya sih gini, artikel sebelumnya itu khan memakai teknik float untuk membuat tampilan listnya (menunya) menjadi horizontal. Cara yang sekarang ini tidak memakai float tetapi memakai properti display untuk merubah tag <li></li> yang tadinya merupakan block element menjadi inline element, sehingga akan terlihat horizontal. Sintaks cssnya yang ini :