CSS ile Menü Yapmak I – Dikey Menüler

Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler(<ul>)ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.

Sırasız listeler(<ul>) ilk olarak listeleme işlemleri için kullanılsa da CSS’in yükselişi ile birlikte menü oluşturmak için kullanılmaya başlandı. Aslında menülerde bir bakıma link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da doğru bir tespittir. Kodumuzu yazmaya başlayalım:

<ul class="menu">
    <li><a href="index.html">Ana Sayfa </a></li>
    <li><a href="hakkimizda.html">Hakkımızda</a></li>
    <li><a href="urunler.html">Ürünler</a></li>
</ul>

Kodlama sonucu görüntü aşağıdaki gibi olacaktır.

Her linkin başındaki imgeleri kaldırmak için:

ul.menu {
	list-style-type: none;
}

Bir çok web tarayıcısı sırasız listeleri(<ul>) yorumlarken yukarıda görüldüğü gibi otomatik olarak soldan bir padding/margin(bazı tarayıcılarda padding uygularken bazılarında margin uygular) mesafesi uygular bu mesafeyi sıfırlamak için:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Bu bölüme kadar yazılan kodlamalar hem dikey menüler hem de yatay menüler içinde aynıdır. Ancak bundan sonra dikey menü ve yatay menü için kodlar değişecektir.

Dikey Menüler

Dikey menülerde linkler yukarıdan aşağı doğru sıralanmıştır. Link elementi(a) inline-elementtir, her linke rollover özelliği kazandırmak için:

ul.menu a {
	display: block;
}

Biraz görselliği arttırırsak:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
}

Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
}

Linkler arasına biraz boşluk verelim:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
    padding: .2em .8em;
}

Linklerin altındaki çizgileri kaldıralım:

ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
    padding: .2em .8em;
    text-decoration: none;
}

şimdi linklerimize rollover efekti vermek için a:hover kullanacağız:

ul.menu a:hover
{
	background-color: #999;
}

son olarak linklerin arasını ayıralım:

ul.menu li {
	margin: 0 0 .2em 0;
}

İşte menümüzün son hali

71 Yorum (Yorum Ekle)

OzanT diyor ki:

Şubat 2, 2009, 10:46

hocam bu yaptığınız basit menü örneğinde active stilinin sadece tıklanırken değil de en son tıklanan link stili olarak sabit kalmasını istiyorum. nasıl yapabilirim? yani tıklayınca stil görünüp hemen kayboluyor. ama ben diğer butona basana kadar o stilin görünmesini istiyorum.

Cevapla

ükrşat diyor ki:

Aralık 3, 2008, 11:20

hocam biraz araştıdım ama tatmin edici bir şey yyoktu.daha sonra mozillada denedim ve IE de denedim.mozilla menünün width özelliğini destteklemedi bence.
verdiğiniz kod:
ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
text-decoration: none;
}
işte burda mozilla bişii desteklemedi.hocam nedir bu desteklenmeyen.?cevaplarsanız sevinirim.

Cevapla

Mert diyor ki:

Ekim 13, 2008, 17:22

Teşekkür ederim.. çalışmalarınız gayet açık ve aydınlatıcı.. ben sitemi yaptıktan sonra karşılaştım ama yinede takip ederim. tekrar teşekkürler.

Cevapla

Aycan diyor ki:

Eylül 17, 2008, 14:14

Çok sağol hocam çok güzel oldu artık sitenizden ayrılmayacağım:)

Cevapla

Mustafa Cihad diyor ki:

Şubat 28, 2008, 10:14

Hocam soruma yanıt alamadım ?

Cevapla

Mustafa Cihad diyor ki:

Şubat 26, 2008, 17:03

SerdarK’dan alıntı yapılmıştır :
“Merhaba,
Ben bu menüyü kullanıcam ama bir şeyi yapamadım. Yardımcı olurmusunuz?

Bu menude “hover” olarak kullanılan kodu aynı zamanda “active” olarak kullanmak istiyorum… Yani menudeki mesela 2. linke tıklandığında sayfa refresh olacak ama 2 link üzerindeki tablo rengi “hover” daki gibi olacak.. Açılan sayfada hangi linke tıkladıysak o sayfanın linki “active” belirttiğimiz gibi olmasını nasıl sağlarım ?

Ben active kodu tanımlıyorum ama sadece tıkladığımda tablo rengi değişiyor, sayfa açıldığında yine mouseout şeklinde tanımlı kodu çekiyor…”

Hocam benim sorunum da arkadaşınkine benzer. Ben linke tıkladığımda ilgili link örneğin kalın oluyorsa aktif sayfanın linki bold olarak kalsın. fakat ben bu linke tıklayıp sonra sitede herhangi bir boş alana tıklasam link eski haline geri dönüyor. Bunun nedeni nedir acaba?

Cevapla

fatih.hayrioglu diyor ki:

Şubat 26, 2008, 15:08

li’ye display:inline vererek devam etsen olacaktır

Cevapla

Hakan diyor ki:

Şubat 26, 2008, 10:58

hocam verdiğiniz bilgiler gerçekten çok güzel, sayenizde web sitemin basit tasarımını css ağırlıklı olarak yapabildim, ancak şöyle bir sorunum var, oluşturduğum dikey menü ie 7de sorunsuz görünürken ie6da linkler arası oldukça ayrık bir biçimde görünüyor, bunun nedeni sizce ne olabilir?

ul.menu { list-style-type: none; list-style-position: outside; padding: 0; margin: 0; float: right;}
ul.menu a { display: block; color: white; background-color: gray; width: ; padding: .2em .5em; text-decoration: underline; text-align: left;}
ul.menu a:hover {background-color: #69c;}
ul.menu li {margin: 0 0 1px 0; text-align: left;}

Anasayfa
Güncel
Çalışma Ekonomisi
Sosyal Politika
Sosyal Güvenlik
İnsan Kaynakları
İş Hukuku
İş Sağlığı ve Güvenliği
İstatistikler
Kitap
İnternet Kaynakları