Css ile sarkan menüler hazırlamak

Konu: Css ile sarkan menüler hazırlamak Salı Eyl. 08, 2009 1:24 pm

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 Css ile sarkan menüler hazırlamak Icon_wink

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.

id="sarkan_menu">
href="#">Anasayfa

href="#" class="aktif">Hizmetler

href="#">Hakkında

href="#">İletişim

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.