Birçok web sitesinde dikey menü görmüş olmalısınız. Bu menüler içerisinde Ana Sayfa, Hakkımızda, İletişim gibi sayfalar yer alabilmektedir. Peki, eğer siz de böyle bir menü oluşturmak istiyorsanız, ne yapacaksınız? Çünkü herkesin kodlama bilgisi yok. Bunun için CSS ve HTML konusunda araştırma yapmanız gerekecek. Bu yüzden ben sizler için örnek bir kod paylaşmak istiyorum. Aşağıdaki kodları kullanarak dikey menü yapımında bulunabilirsiniz. Umarım faydalı olacaktır.

AYRICA: Ücretsiz CSS Menüler Bulabileceğiniz Önemli Bir Kaynak

HTML ve CSS ile Dikey Menü Yapımı

1) HTML kodları aşağıdaki gibidir.

<div class="vertical-menu">
<a href="#" class="active">Ana Sayfa</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>


2) CSS kodları ise aşağıdaki gibidir.

.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}


Kaynak: W3Schools