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.
çok teşekkürler çok faydalı oldu
Çok guzel olmu_ ben liinkin uzerine gidince bana onun alt linkleri olmas1n1n istiyorum bunu nas1l yapabilirim
yatay açılır menülerii nceleyin
02.li a {
03. background:url(images/sekme_sol_resim.gif) no-repeat left top;
04. display: block;
…..
buradaki
kodu fazla olmuş. menunun şeklini bozuyor.
bir fazlalık yok. soldaki yuvarlağın kodu bu
Uzun zamandır Dw editörü ile kendi sitemi düzenliyor ve yayınlıyorum.
DW artık keyif vermiyor.
Mevcut bilgim nedeniyle, XHTML ve CSS ile sitemi inşa etmeye karar verdim.
Siteniz son 3-4 yıldır yararlandığım site.
Sistematik bilgi edinmek için; “Web’de erişirlik, XHTML ve CSS” adlı bir kitap edindim. Kitapta örnek site “KOZA” nın kodlarını yazarın sitesinden indirdim.
CSS ile hazırlanan “Ana Menü” beni etkiledi. beğendim.
Bilgiyi edinmek için zaman ayırdım.
Sonuç alamadım.
Uygulamalarım ve elde ettiğim sonuçlar:
1-Kodlara dokunmadım.
2-Yazıları değiştirdim. Ana menü yazılarını değiştirdim. Alt menü yazılarını değiştirdim. Çok güzel farklı bir isimle güzel bir site ortaya çıktı.
3-Grafikleri değiştireyim dedim. Sorun başladı. Altmenü grafiklerini değiştirdim onlarda sorun çıkmadı./Anamenü grafik renklerini değiştirdim sorun çıktı.
4-Sorun nedir ? deseniz, sorun şu: linkler ve geçişleri çalışıyor. İşlevde sorun yok. Sorun; “Anamenü Link Grafiklerinin görünümünde; Görünüm, dikey panjur gibi kesik-kesik görünüyor.
Nerde hata yapıyorum ?
Bu yöntemin adı nedir? Sizin sitenizde hangi başlık altında incelenmektedir ?
Bilgi için şimdiden teşekkür ederim.
Not: Kitabını edindiğim yazarın sitesi ve bahsi geçen örnek site’de bilgi için adres:www.turkscript.com/koza/
Menüyü bilmediğim için hangi konudan bahsettiğiniz anlayamadım
peki bu oluşturduğumuz menüye, tiklandiktan sonra bir zemin rengi ve/veya başka bir resim atayabiliyormuyuz ? yani şöyle söyliyeyim, index’imiz açildiğinda AnaSayfa butonunun alt zemini kırmızı ama yanindakiler gri, sonra Haberlere tıkladığımızda Haberler menüsünün altı kırmızı olacak diğerleri gri olacak? CSS bu mümkünmüdür ?
üçüncü bir ardalan kullanmak için
li a span
gibi bir ek yapmak gerekir
merhaba Hocam ben bu şekilde css tablar oluşturmam gerekiyor fakat çok dilli bir yapıda kullanacağım için tablar uzayıp kısalabilir oluyor bunun için 3 parça yapmam gerekiyor acaba bu söyledğim şekilde yapabilirmiyim yoksa sizin burada yaptığınız gibi 2 parça mı resim kullanılarak yapılıyor sadece
@yıldırım
kodlardan bişey anlayamadım bu nednele sildim kusura bakma.
menü görüntüsünün böyle ayrıca alt menüsü olsun şeklinde mi istiyorsun?
Bu açılan menu ama nastl renk verecem katagori ayrı altmenu ler ayrı ren istedim bitürlü yapamadım.. Yardım ederseniniz sevinirim.
teşekkürler menü gayet güzel.