CSS ile Menü Oluşturma
Sırasız listeleri (ul etiketlerini) CSS ile biçimlendirerek çok farklı ve güzel menüler oluşturabiliriz. Örneğin ul etiketleri ile oluşturulmuş listeler dikey menülere, yatay menülere, açılır menülere dönüştürülebilmektedir.
Ul ve li etiketleri ile oluşturulmuş bir listeyi dikey menüye dönüştürmek oldukça kolaydır. Bir önceki konuda da (Liste Özellikleri) liste özellikleri biçimlendirilerek bir menü elde edilmiştir.
Alt kısımda basit bir dikey menü oluşturulmuştur. Bu örnekteki bazı kodları açıklarsak;
ul#linkler li { } Burada belirtilen stiller, linkler isimli ul etiketinin içerisindeki li etiketlerine uygulanacaktır. Diğer li etiketleri bu stillerden etkilenmeyecektir.
ul#linkler li a { } Linkler id'si verilmiş ul içindeki, li içindeki, a etiketlerini biçimlendirmek için kullanılır.
ul#linkler li:hover { } Burada belirtilen stiller, linkler isimli ul etiketinin içerisinde olup da fare ile üzerine gelinen li etiketlerine uygulanacaktır.
ul#linkler li a:hover { } Linkler id'si verilmiş ul içindeki, li içindeki, a etiketlerinin üzerlerine gelindiğinde nasıl görüneceğini ayarlamak için kullanılır.
Not: ul#linkler li ifadesi ile #linkler li ifadesi aynı işe yarayacaktır.
Örnek: Aşağıdaki örnekte ul etiketine solListe isimli class uygulanmıştır.
Html Kısmı:
<ul class="solListe">
<li><a href="#">İstanbul Tarihi</a></li>
<li><a href="#">Önemli Yerler</a></li>
<li><a href="#">İlçeler</a></li>
<li><a href="#">İstanbul Boğazı</a></li>
</ul>
Css Kısmı:
.solListe{
padding: 0px;
width: 200px;
list-style-type:none; /* madde işaretini kaldırdık */
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.solListe li a{
display:block; /* açıklaması aşağıda */
background-color: #CF9;
width:155px;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
font-weight: bold;
color: #0080C0;
padding-left: 30px;
padding-right: 5px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 3px;
margin-right: 3px;
border: 2px solid #CF9;
}
.solListe li a:hover{
color: #F60;
border: 2px dashed #F60;
}
Not: a etiketine
display: block özelliğinin uygulanması şu sebeptendir: a etiketine arka plan rengi verdiğimizde
, genişlik hepsinde farklı görünecektir. Çünkü a etiketi inline elemandır ve içindekiler ne kadar yer kaplıyorsa, genişliği o kadar olur. Her satırdaki a etiketlerinin genişliklerini eşitleyebilmek için onlara width vermemiz gerekir. Ancak inline elemanlara width de verilemeyeceği için, öncelikle a etiketlerini block elemana çevirmek gerekir. Ardından width uygulayarak tüm a etiketlerinin genişliğini eşitleyebiliriz.
css ile menü yapma, ul li etiketleri ile menü oluşturma yapma, a etiketlerinin genişliğini eşitleme, css dikey menü yapma
KONU İLE İLGİLİ ÖRNEKLER
.solListe2{
background-color: #CF9;
padding: 0px;
width: 196px;
border: 2px solid #0080C0;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
list-style-type: none;
}
.solListe2 li a{
display: block;
color: #0080C0;
text-decoration: none;
margin: 0px;
width: 161px;
padding-top: 7px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 30px;
font-weight: bold;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.solListe2 li a:hover{
color: #FFF;
background-color: #0080C0;
}
14799 kez okundu.