Membuat Sub Menu Navigator Menggunakan CSS

Posted by widik on May 25th, 2007

Dari 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 :

Read the rest of this entry »


Membuat Menu Menggunakan CSS

Posted by widik on 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>

Read the rest of this entry »



Copyright © 2007 My Personal Page. All rights reserved.