CSS ile Sekmeli(Tab) Menü Yapımı
Sekmeli menümüzü Doug Bowman’ın Sliding Doors tekniği ile yapacağız. Bu teknik bize esnek yapılı, yuvarlak kenarlı sekmeli menü yapma olanağı sağlar. Adım adım gidersek
1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:
<ul> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Haberler</a></li> <li><a href="#">Ürünler</a></li> </ul>
2. 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;
}
3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.
Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.
4. 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;
}
5. 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:
<ol>
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;
}
6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:
ul a:hover {
color: #9D9C9C;
}
Örnek kodları indirmek için tıklayınız.
Sonuç: Kodumuzu çalıştırdığımızda aşağıdaki sonucu elde edeceğiz. Tab menüye bir çok örnek var resimli, resimsiz, resimli rollover gibi; internette aratarak bir çok örnek bulabilirsiniz.
Fatih ustadım şimdi benim anlatmak istediğim olayda zaten css kullanılmış koyu mavi renkte çıkıyor. Benim istediğim içlerinden özel olan bir kutucuk var onun üzerine gelince kırmızı yanmasını istiyorum sitemi incelediğinde belki derdimi anlayabilirsin :)
http://www.opelx.com
Sayfanın en yukarısındaki kutucukların hepsinin üzerine gelince mavi yanıyor. GARAJX in üzerine geldiğinde ise kırmızı yanmasını istiyorum
Şimdiden teşekkürler
üzerine gelince farklı renk olacak menü elmanına bir sınıf atayarak yapabilirsin. Daha sonra bu sınıfı özel :hover tanımı işini halleder.
örn:
- Anasayfa
- Ürünler
css kodunda
a.farkli:hover{
color:#f00;
}
yaparsan olacaktır
Merhaba ustadım
Benim bir sorum olacaktı. Vbulletin sistem portalım var. Header templatesine css kod kaynaklı bir kısım oluşturdum. 6 Menü seçeneğinin üzerine geldiğinde de aynı renkte değişiyor. Sadece birisini üzerine geldiğimde farklı renkte göstermek istiyorum bunu css kodlarıyla nasıl yapabilirim.
İE ve FF aynı görünüyor. Fazladan eklediğin bir şeyden kaynaklanabilir.
hocam ben bunu uyguladım ama bir sorun çıktı firefoxta herşey çok normal ie de menu yukarıya kayıyor. margin değerini – vermek zorunda kalmıştım tam yerine oturtmak için. nasıl çözücem ben bu probu?
bunu yapabilmek için ayrıca “Zemin Resmi Kaydırma” yöntemi uygulamak gerekiyor.
http://www.alistapart.com/articles/slidingdoors2/
örnek sayfa
http://www.alistapart.com/d/slidingdoors2/v1/ex10.html
üstadım bu menüden yapmak istiyorum ancak üzerine gelince yazının rengi ile beraber zemindeki grafiğinde değişmesini istiyorum. Bu konuda bir fikir verebilirmisin
Teşekkür ederim
Uyarı için teşekkürler. Düzelttim.
Üstad öncelikle not defterindekilerini bizimle böyle paylaştığın için teşekkürler. Bu konuda bir şey dikkatimi çekti.
5. adımda 2. satırda background için grafik dosyayısını seçiyoruz. Fakat 6. satırda aynı parametrelerle bu sefer başka bir grafik dosyasını seçiyoruz?
Ayrıca aynı grafik dosyalarıyla kendime menü yaptım fakat soldaki grafik çıkmıyor. Tab’ların sol tarafı düz sağ tarafı yuvarlak görünüyor….. diyordum ki sorunu gördüm :D
Bilgiler için tekrar teşekkürler. CSS i seninle çözdüm diyebilirim.
Çok Saol ne diyim dw de flash buton o bu derken kafayı çizdim ama soın derese sade esnek ve kolay