HTML Dikey Menü Yapımı

HTML Dikey Menü Yapımı

Bu kategoride ilk paylaşımım olarak HTML dikey menü yapımını açıklayacağım.

İlk önce html kodlarımızı belirtelim.

<ul class="menu">
<li><a href="">Anasayfa</a></li>
<li><a href="">Hakkımızda</a></li>
<li><a href="">İletişim</a></li>
</ul>

Ardından CSS kodlarımızı tanımlayalım.

ul.menu{
list-style-type:none;
padding:0px;
margin:0px;
}

ul.menu a {
display:block;
color:white;
font-family:Verdana;
text-decoration: none;
text-align: center;
padding:5px 0px;
}

ul.menu li {
width:300px;
background: pink;
margin-bottom:5px;
}

.menu li a:hover{
background-color: black;
}

Ben pembe arkaplan içerisinde linklerinin rengi beyaz olan ve mause üzerine gelince arkaplanı siyah renge dönüşen (hover özelliği ile) menü yaptım..Yukarıdaki kodları inceleyerek hatta HTML düzenleyici herhangi bir editör açarak istediğiniz gibi değiştirebilir, kullanabilirsiniz.

Menünün hazır hali de aşağıdadır. “Result” butonuna basarak hazır halini görebilirsiniz.

See the Pen mqpwrN by serhat (@webmaestro34) on CodePen.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir