Css ile sarkan menüler hazırlamak
Sarkan menüleri, baş aşağı çevrilmiş sekmeli menülere (tab menu) benzetebiliriz. Bu menüler genellikle bir web sayfasının en üst bölümünde yer alırlar. Fareyi herhangi bir menü öğesinin üzerine getirdiğinizde, menünün renk değiştirdiğini ve diğerlerinden biraz daha aşağıya doğru kaydığını görürsünüz (yandaki resme bakınız). İşte bu yazımda da css ile sarkan menü yapımını anlatacağım 
HTML ile menü yapısının oluşturulması
Öncelikle sarkan menümüzü oluşturan menü öğelerini HTML ile belirtmemiz gerekiyor. Bunun için bir DIV etiketi içerisinde bir sırasız liste oluşturmamız lâzım. Önemli olan nokta DIV etiketinin ID özniteliğine "sarkan_menu" ismini vermiş olmak. Ayrıca herbir menü öğesinin tıklanabilir olması için A etiketi ile linke çevrilmiş olması gerekmektedir.
Bu kodların ekran görüntüsü alttaki gibi olacaktır:
CSS ile biçimlendirme işleminin yapılması
Sarkan menümüzü oluşturduktan sonra şimdi de CSS ile bu menüyü biçimlendirip son şeklini vermemiz gerekiyor. Bunun için önce menü öğelerini alt alta değil de yan yana sıralamamız gerekecek. Bundan sonraysa menü öğelerinin genişlik ve renk değerlerini atayacağız. Son olarak da fare, bir menü öğesi üzerindeyken o menü öğesinin aşağıya doğru sarkmasını sağlayacağız. Tüm bu işlemleri 4 bölüm halinde ele alacağız.
mouse-over.png
Biçimlendirme yaparken Abode Fireworks yazılımı ile hazırladığım üstteki görseli de kullanacağız. Adı üstünde "mouse-over.png" dosyası, fare ile bir menü öğesinin üstüne geldiğimizde işimize yarayacak. Bu görselin genişlik (width) değeri 85 pikseldir.
1. bölüm :
-
#sarkan_menu ul {
-
margin: 0;
-
padding: 0;
-
height: 100%;
-
overflow: hidden;
-
list-style: none;
-
}
Bu ilk bölümde UL etiketi ile oluşturduğumuz sırasız listeyi biçimlendiriyoruz. Margin ve Padding ile uzaklık değerlerini sıfırladık. Sonra Height ve Overflow ile taşma problemi oluşmasını önledik. List-style ile de menü öğelerinde madde imleri (bullet) görünmesini engelledik.
2. bölüm :
-
#sarkan_menu ul li {
-
float: left;
-
margin-right: 1px;
-
font: bold 12px/14px Arial, Helvetica;
-
}
İkinci bölümde LI etiketi ile oluşturduğumuz liste öğelerini biçimlendirdik. Float ile liste öğelerinin sola hizalanıp yan yana dizilmesini sağladık. Margin-right ile liste öğelerinin sağ tarafına 1 piksellik bir boşluk bıraktık. Font ile de liste öğeleri içerisindeki yazıların kalın, 12 piksel boyutunda ve Arial fontuyla görünmesi gerektiğini belirttik.
3. bölüm :
-
#sarkan_menu ul li a {
-
display: block;
-
padding: 5px 0;
-
width: 85px;
-
border-top: 8px solid #3f3f3f;
-
color: #3f3f3f;
-
text-align: center;
-
text-decoration: none;
-
}
Üçüncü bölümde liste öğeleri içerisinde yer alan ve A etiketi ile oluşturduğumuz menü linklerini biçimlendirdik. Display ile menü linklerine genişlik değerinin atanabilmesini sağladık. Padding ile üstten ve alttan uzaklık değerlerini belirledik. Width ile de menü linklerinin 85 piksel olmasını sağladık. Border-top ile menü linklerinin üstüne bir çizgi çekip, Color ile de yazı rengini belirledik. Text-align ile yazıların ortaya hizalanmasını, Text-decoration ile de bu yazıların altındaki çizgilerin kaybolmasını sağladık.
4. bölüm :
-
#sarkan_menu ul li a:hover,
-
#sarkan_menu ul li a.aktif {
-
padding-bottom: 8px;
-
border-top: 8px solid #101010;
-
background: #101010 url(mouse-over.png) bottom no-repeat;
-
color: #fff;
-
}
Bu son bölümde ise fare ile menü linklerinin üzerine gelindiğinde oluşacak görüntüyü elde ediyoruz. Padding-bottom ile ilgili menü linkinin aşağıya doğru 8 piksel sarkmasını sağlıyoruz. Border-top ile 3. bölümde çizdiğimiz çizginin renk değerini değiştiyoruz. Background ile de ilgili menü linkinin arkaplan rengini değiştirip, hazırlamış olduğumuz "mouse-over.png" görselinin görünmesini sağlıyoruz.
Böylece hazırlamış olduğumuz bütün CSS kodlarının son hali şu duruma geldi:
-
#sarkan_menu ul {
-
margin: 0;
-
padding: 0;
-
height: 100%;
-
overflow: hidden;
-
list-style: none;
-
}
-
-
#sarkan_menu ul li {
-
float: left;
-
margin-right: 1px;
-
font: bold 12px/14px Arial, Helvetica;
-
}
-
-
#sarkan_menu ul li a {
-
display: block;
-
padding: 5px 0;
-
width: 85px;
-
border-top: 8px solid #3f3f3f;
-
color: #3f3f3f;
-
text-align: center;
-
text-decoration: none;
-
}
-
-
#sarkan_menu ul li a:hover,
-
#sarkan_menu ul li a.aktif {
-
padding-bottom: 8px;
-
border-top: 8px solid #101010;
-
background: #101010 url(mouse-over.png) bottom no-repeat;
-
color: #fff;
-
}
Sonuç...
Bence yeterince güzel, yapımı kolay ve kullanışlı bir menü ortaya çıktı Ya sizce? Hazırladığımız bu menünün çalışır haline buradan ulaşabilirsiniz. Ayrıca bu menünün 5 farklı renk seçeneğini de hazırlayıp bir paket haline de getirdim. Bu pakedi eBurhan Araçları sayfasına girerek eburhan Sarkan Menüler ismiyle indirebilirsiniz.
Yorum takibi
Geri izleme
Yazıyı Paylaş
4 Mart 2008, 11:18
İnternet & Web
Bugün 2 kez, toplam 2,744 kez okundu.
css, sekmeli menü, tab menu
4 Mart 2008, 11:47
Eline Sağlık
4 Mart 2008, 13:19
Gayet güzel ve açık bir anlatım. Yalnız menü üstündeki border ile mouse-over imajı arasındaki küçük renk tonu farkını gidersen daha hoş olabilirdi sanırım.
4 Mart 2008, 13:39
Erhan ne diyim ya eline koluna sağlık. Gerçekten güzel bir anlatım ve fevkalade bir menü olmuş. Ben de bu tarz birşey anlatmayı düşünüyordum sitemde. Bilhassa yeşil menüyü daha fazla beğendim. Yeşile olan hassasiyetimizden midir nedir
Ellerin dert görmesin emi…
4 Mart 2008, 13:46
Güzel olmuş eburhan çok teşekkürler.
4 Mart 2008, 14:46
gerçekten güzel olmuş Erhan abi. ben de ne zamandır kendi sitemde bulunan menülere bir hareket katmak istiyordum…
4 Mart 2008, 16:55
Güzel olmuş tebrikler
4 Mart 2008, 18:56
Vay mükemmel olmuş eline sağlık .
4 Mart 2008, 19:36
ellerine sağlık… kullanacağım..
4 Mart 2008, 21:03
Yorumlarınız için teşekkürler arkadaşlar.
@Emre Özçelik
Border rengi ile imajın aynı renkte olması daha mı iyi olurdu? Renk seçimi konusunda çok bilgili olmadığım için sizin görüşleriniz daha önemli
4 Mart 2008, 23:00
gayet hoş olmuş hocam. teşekkürler.
5 Mart 2008, 22:19
Güzel bir anlatım ve bilgilendirici bir yazı olmuş. yine teşekkürler…
8 Mart 2008, 00:28
Çok güzel olmuş, teşekkürler.
9 Mart 2008, 19:05
Ellerine sağlık kardeşim çok güzel bir anlatım olmuş
Bu arada onun “a:active” olması gerekmiyor muydu
9 Mart 2008, 19:06
Pardon görmemişim, sen zaten linklere aktif isimli class vermişsin. Neyse benim hatam
10 Mart 2008, 11:57
valla erhan büyük bir zevkle takip ediyorum vakit buldukça bloğunu. güzel bilgiler veriyorsun bunun için teşekkür ederim kendi adıma.
10 Mart 2008, 15:23
çok güzel bir paylaşım olmuş her zamanki gibi
eline sağlık sağlıkcakla kalın
10 Mart 2008, 20:29
[…] eburhan yine yapmış yapacağını. Css ile Sarkan Menüler Hazırlamak başlığı ile yazdığı makalesinde güzel bir Css, Xhtml menü yapımı anlatıyor. […]
12 Mart 2008, 09:20
[…] yapacağınızı görmek ve örnek kodları incelemek için eburhan.com tarafından hazırlanan Css ile sarkan menüler hazırlamak adlı yazıyı […]
12 Mart 2008, 11:21
[…] “CSS ile sarkan menüler hazırlamak” Bağlantı […]
12 Mart 2008, 22:46
[…] Css ile sarkan menüler hazırlamak […]
13 Mart 2008, 20:24
Teşekkürler. Harika.
21 Mart 2008, 20:59
Aşağıdaki siteyle bir alakan var mı? Makaleni kendileri yazmış gibi göstermişler.
{link engellenmiştir}
21 Mart 2008, 21:21
@Önder
O siteyle elbette alâkam yok. Başkasının yazdığı yazıları ve hazırlanmış olduğu uygulamaları kendisi yapmış gibi gösterenlerle işim olmaz zaten.
Gerekli uyarıyı yaptım kendilerine. Uyarıyı dikkate alıp almamaları kendi vicdanlarına kalmış. Tabi onlarda vicdan diye birşey varsa…
6 Nisan 2008, 15:05
merhabalar bu menüleri nasıl ortalayabiliriz acaba ?
9 Nisan 2008, 20:23
[…] bir anlatımla sunulmuş bu yazıya buradan […]
26 Nisan 2008, 04:05
Ellerine sağlık kardeş o kadar güzel anlatım ve örnekleme yapmışsın ki bu işten hiç anlamayan birinin bile bir çırpıda bu menüleri yapası gelir. Düzenli takip ettiğim bir kaç blogdan birisin. Ama belirtmeden geçemeyeceğim bugünlerde yazıları biraz daha az sıklıkta yazmaya başladın. Yeni bilgilere ihtiyacımız var.
9 Mayıs 2008, 11:26
gerçekten çok güzel bir anlatım olmuş, çok açık ve net