Vertical-Menu
Pada posting saya sebelumnya telah di berikan contoh cara membuat menu horizontal dengan CSS. Di sini akan saya berikan cara membuat menu vertical dengan CSS yang cukup mudah dan singkat.
Pertama siapkan strutur menu HTML-nya dengan tag list (ul dan li). Menu bisa hover untuk menampilkan submenu seperti pada gambar di atas.
Berikut ini contoh coding HTML-nya:
<body> <div id="leftmenu"> <p>Menu Navigator</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">Category</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Forum Discussion</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body>
Kemudian untuk presentasinya kita buat CSS dengan coding sebagai berikut:
<style>
#leftmenu {width:130px;font:bold 12px arial,verdana,sans-serif;}
#leftmenu li a {text-decoration:none;border-top:1px solid #ffffff;
color:#000000;display:block;background-color:#e0e0e0;padding:10px;}
#leftmenu li a:hover {background-color:#f0f0f0;}
#leftmenu ul {list-style:none;padding:0px;}
#leftmenu ul ul{position:absolute;top:75px;left:135px;visibility:hidden;}
#leftmenu ul li:hover ul{visibility:visible;}
</style>
Silahkan di modifikasi sesuai selera Anda. Selamat mencoba.