Membuat Menu Menggunakan CSS

May 10th, 2007

Css dapat digunakan untuk membuat menu navigasi dengan mudah dengan memanfaatkan properti yang disediakan css.
Kali ini kita akan mencoba membuat menu navigasi secara horisontal.
kita buat list menu di html

<!doctype html public “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Menu Navigasi dengan CSS</title>
</head>
<body>
   <div id=”navigation”>
      <ul>
         <li><a href=”#” mce_href=”#”>Home</a></li>
         <li><a href=”#” mce_href=”#”>Produk</a></li>
         <li><a href=”#” mce_href=”#”>Layanan</a></li>
         <li><a href=”#” mce_href=”#”>Contact Us</a></li>
      </ul>
   </div>
</body>
</html>

dari script di atas kita akan mendapatkan tampilan list secara default sebagai berikut:

Untuk membuat lebih bagus kita tambahkan beberapa properti css :

#navigation {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}