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

60 Yorum (Yorum Ekle)

uğur yörük diyor ki:

Temmuz 18, 2007, 22:14

harika bir makale olmuş..teşekkürler..

Cevapla

fatih.hayrioglu diyor ki:

Temmuz 10, 2007, 09:33

İlk kod html diğerleri css kodu. nereye ve nasıl yaılacağını soruyorsanız. CSS’i Web Sayfalarına Eklemek okumanızı tavsiye ederim.

Cevapla

rdurmus diyor ki:

Nisan 13, 2010, 13:00

Çok iyi anlatmışsın tebrikler

Cevapla

emre diyor ki:

Temmuz 9, 2007, 15:37

cahilliğime ver kusura bakmaa

ilk basamakta verdiğin koda bakarak menuyu olusturdum fakat sonrakı basamakları yapamadım
yazarkan birşeyi atlıyormuyum acaba

ul.menu a { display: block; }

bunun gibileri ekrana yazıyorum ama calışmıyor

ilgilenirsen makbule geçer

Cevapla

hasan diyor ki:

Temmuz 5, 2007, 13:11

merhaba;
verdiğiniz linki denedim internet explorer’da çalışmıyor fakat firefox’da çalışıyor.Explorerda çalışmasını nasıl sağlayabilirim.iyi çalışmalar

Cevapla

fatih.hayrioglu diyor ki:

Temmuz 3, 2007, 10:29

CSS’i web sayfalarına eklemek adlı makaleyi okumanızı tavsiye ederim.

Cevapla

kenan diyor ki:

Temmuz 3, 2007, 09:54

merhaba;
bu menü tam benim aradığım menü ama ben yeniyim bu konularda

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

bu içerikleri nereye yazacağımı bilmiyorum. yardımcı olursanız sevinirim.

Cevapla

fatih.hayrioglu diyor ki:

Nisan 19, 2007, 12:30

Bunun için bir makale yazabiliriz, ancak hızlı bir çözüm olsun diye bir link vermeyi tercih ediyorum.

Cevapla

Emrah Özşahin diyor ki:

Nisan 19, 2007, 11:49

Yayınladığınız bu makaleler için çok teşekkür ederim. Benim öğrenmek istediğim konu yukarıda yayınlanan menüde, mesela Ürünler linkini tıkladığımızda ürünler sayfası gelecek ve o sayfada ürünler linki seçili olduğunu belirten bir değişik renk veya bir icon işareti üstünde olacak. Ayrıca alt kategorileri menüde yer alacak mesela ürünleri tıklayınca altında, t-shirt, gömlek, kazak gibi örnek

http://www.eintracht.com/news/index.php?id=111130

bunun gibi nasıl yapabiliriz.

Cevapla