Dalam tutorial kali ini kita akan coba membuat menu vertikal dengan html dan css, maksudnya susunan menunya dari atas ke bawah. Sebetulnya tidak hanya untuk menu tapi bisa juga untuk membuat daftar kategori, daftar judul artikel yang biasanya ditempatkan di kolom sebelah kiri atau kanan dari layout halaman web bahkan bisa juga di bagian footer. Untuk membuat menu secara vertikal pada dasarnya menggunakan tag list yang dimodifikasi atau diatur melalui CSS. Tag list ditempatkan di dalam tag div dengan penggunaan atribut id dan class untuk dapat dikontrol dari CSS. Coba perhatikan gambar menu vertikal di bawah ini:
Untuk membuat menu vertikal seperti di atas dapat mempelajari source code berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Membuat Vertikal</title>
<Style>
#menukiri{
border:1px solid;
width:200px;
height:340px;
margin:0 0 5px 5px;
position:relative;
float:left;
}
.judulmenu{
width:190px;
height:auto;
padding:5px 0 5px 10px;
background-color:#0099cc;
font-size:18px;
font-wieght:bold;
color:yellow;
position:relative;
clear:both;
}
.box {
width: 198px;
padding-left: 1px;
}
.box ul {
margin: 0 0 0 10px;
padding: 0;
list-style: none;
}
.box li {
padding: 5px 0;
background: url(img10.gif) repeat-x bottom;
}
.box a {
padding-left: 10px;
background: url(img11.gif) no-repeat 0 5px;
}
.box a:link{
text-decoration:none;
color:#cc7700;
}
.box a:hover{
text-decoration:underline;
color:blue;
}
.box a:visited{
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<Div id="menukiri">
<div class="judulmenu">Menu Utama</div>
<div class="box">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Demikianlah tutorial singkat tentang cara membuat menu vertikal dengan html dan css, silahkan pelajari dan kembangkan. Semoga bermanfaat.