Dikey CSS Menu Yapimi
CSS ile Dikey [Vertical] Menü Yapımı
Merhaba arkadaşlar, bu makalemizde CSS kullanarak sitemiz için dikey menüler oluşturacağız,Hemen Başlayalım :]
Arkadaşlar öncelikle aşağıdaki kodumuzu web sitemizde menümüzün görünmesini isteidğimiz yere yapıştıyoruz, site adreslerini ve link isimlerini kendinize göre düzenlemeyi unutmayınız.
<ul id="dikeymenu">
<li><a href="http://sharetime.tr.gg/">Menü Linki</a></li>
<li><a href="http://sharetime.tr.gg/">Menü Linki</a></li>
<li><a href="http://sharetime.tr.gg/">Menü Linki</a></li>
<li><a href="http://sharetime.tr.gg/">Menü Linki</a></li>
<li><a href="http://sharetime.tr.gg/">Menü Linki</a></li>
</ul>
Daha sonra CSS kodlarımıza girerek aşağıdaki kodları ekliyoruz;
#dikeymenu li{
Peki bu kodu ekledikte ne oldu?Arkadaşlar bu kod ile, menüdeki elemanlarımızın rengini turuncu yaptık,siz rengi istediğiniz gibi değiştirebilirsiniz, bunu yapmak için tek gereken koddaki "orange" bölümüne ya rengin ingilizce adını yada HTML'deki renk kodu karşılığını yazmaktır.Rengimizi ayarladık, devam ediyoruz.
color: orange;
}
#dikeymenu li{
Gördüğünüz gibi kodlarımıza "text-decoration" adında bir eleman ekledik, bu yazımızın dekorasyonunu belirler, "none" değeri ise normal değerini taşır, yani menü linklerimizde altçizgi vs olmayacak.
color: orange;
text-decoration:none;
}
#dikeymenu li{
Kodlarımıza "font-weight" satırını ekledik, bu satır yazımızın kalınlığını belirler, biz "bold" yazdık bu kalın demek, "normal" yazarsanız yazı normal kalınlığında olacaktır.
color: orange;
text-decoration:none;
font-weight: bold;
}
#dikeymenu li{
Kodlarımıza "background" elemanını ekledik, bu yazımızın arkaplan rengini belirleyecektir.Ben buraya "white" yani beyaz yazdım, siz istediğiniz gibi değiştirebilirsiniz.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li{
Kodlarımıza "dikeymenu li:hover" adında bir kod kümesi ekledik, buradaki ":hover" ifadesi, "li" ile etiketlediğimiz linklerimizin üzerine geldiğimizde hangi davranış ve özellikleri belirteceğini belirlememize yarar.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li:hover{
}
#dikeymenu li{
Yeni kod kümemize "color" satırı ekleyerek "red" değeri atadık, yani linkimizin üzerine gelindiğinde rengi kırmızı olacak.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li:hover{
color: red;
}
#dikeymenu li{
Yeni kod kümemize "text-decoration" satırı ekleyerek "underline" değeri atadık, yani linkimizin üzerine gelindiğinde altı çizgili olacak.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li:hover{
color: red;
text-decoration:underline;
}
#dikeymenu li{
Kodlarımıza "background" satırı ekleyerek "green" değeri verdik, yani linklerimizin üzerine fare ile gelindiğinde yazılarımızın arkaplanı yeşil olacak.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li:hover{
color: red;
text-decoration:underline;
background: green;
}
#dikeymenu li{
Son olarak "font-weight: bold;" satırını ekleyerek yazımızın kalın olduğunu belirtip, dikey menümüzü kabataslak bitiriyoruz.
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
}
#dikeymenu li:hover{
color: red;
text-decoration:underline;
background: green;
font-weight: bold;
}
#dikeymenu li{
Menüdeki elemanların yanındaki yuvarlak işaretlemeyi istemiyorsak "list-style: none;" satırı ekleyerek bunu kaldırabiliriz.Menümüz bitti ve görüntüsü aşağıdaki gibi olacaktır;
color: orange;
text-decoration:none;
font-weight: bold;
background: white;
list-style:none;
}
#dikeymenu li:hover{
color: red;
text-decoration:underline;
background: green;
font-weight: bold;
list-style:none;
}
Tabi burda benim kullandığım CSS kodlarıyla çakıştığı için biraz yarma birşey oldu, siz sıfırdan uygularsanız güzel bir görüntü oluşacaktır :] Sağlıcakla kalın, Bir sonraki makalede görüşmek üzere..
Etiketler: dikey menü | vertical menu | css | horizontal