css sekmeli menu
CSS ile Sekmeli(Tab) Menü Yapımı;
1. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
float: left;
border-bottom: 1px solid gray;
}
Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.
Sol için resim için urlSağ resim için url
2. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:
ul li {
float: left;
background: url(images/sekme_sag_resim.gif) no-repeat top right;
}
3. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-height tanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:
li a {
background:url(images/sekme_sol_resim.gif) no-repeat left top;
display: block;
padding: 0 2em;
line-height: 2.5em;
text-decoration: none;
float: left;
color:#000;
}
4. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:
ul a:hover {
color: #9D9C9C;
}
Yukarıdaki Listemizi Bedava-Siteme uygulama yapıyoruz.
Yukarıda verilmiş olan kodları aşıgıdaki gibi uyguluyoruz.
Örnek Görünüm.
Buradaki amaç tek tek url yapıştırmak yerine direk bu yolu kullana biliriz.Yada Menü gizleme kodunu uygulayarak yapa biliriz.
