Membuat Sub Menu Navigator Menggunakan CSS
CSS May 25th, 2007Dari tulisan sebelumnya kita telah mencoba membuat menu navigator menggunakan css, pada bahasan kali ini kita mencoba mengembangkan menu navigator dengan menambah sub menu. Misalkan kita akan menambah sub menu pada menu produk : Produk A, Produk B, Produk C.
Kita tambah list item pada tag html menjadi :
<!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>
           <ul>
           <li><a href=”#” mce_href=”#”>Produk A</a></li>
           <li><a href=”#” mce_href=”#”>Produk B</a></li>
           <li><a href=”#” mce_href=”#”>Produk C</a></li>
           </ul>
       </li>Â
        <li><a href=”#” mce_href=”#”>Layanan</a></li>
        <li><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
  </div>
</body>
</html>
Â
Sedangkan pada tag css nya kita tambah properti untuk ul sebagai berikut :
  #navigation ul ul {
  margin-left: 12px;
  }
  #navigation ul ul li {
  border-bottom: 1px solid #711515;
  margin:0;
  }
  #navigation ul ul a:link, #navigation ul ul a:visited {
  background-color: #ED9F9F;
  color: #711515;
  }
  #navigation ul ul a:hover {
  background-color: #711515;
  color: #FFFFFF;
  }
Berikut adalah code selengkapnya :
<!doctype html public “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Menu Navigasi dengan CSS</title>
<style>
  #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;
  }
  #navigation ul ul {
     margin-left: 12px;
  }
  #navigation ul ul li {
     border-bottom: 1px solid #711515;
     margin:0;
  }
     #navigation ul ul a:link, #navigation ul ul a:visited {
     background-color: #ED9F9F;
     color: #711515;
  }
  #navigation ul ul a:hover {
     background-color: #711515;
     color: #FFFFFF;
  }
</style>
</head>
<body>
  <div id=”navigation”>
     <ul>
        <li><a href=”#” mce_href=”#”>Home</a></li>
        <li><a href=”#” mce_href=”#”>Produk</a>
           <ul>
           <li><a href=”#” mce_href=”#”>Produk A</a></li>
           <li><a href=”#” mce_href=”#”>Produk B</a></li>
           <li><a href=”#” mce_href=”#”>Produk C</a></li>
           </ul>
       </li>Â
        <li><a href=”#” mce_href=”#”>Layanan</a></li>
        <li><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
  </div>
</body>
</html>
Maka akan diperoleh hasil :
Recent Comments