CSS ile Menü Yapmak

5 Kasım 2006

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:

:::html
<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:

:::css
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:

:::css
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:

:::css
ul.menu a {
	display: block;
}

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

:::css
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:

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

Linkler arasına biraz boşluk verelim:

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

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

:::css
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:

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

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

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

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

Javascript ile medya kontrolü

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.{% highlight css %}/* Smartphones (portrait) ----------- [email protected] only screen an...… Devamını oku

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.

CSS ile çıktı alırken sayfa sonunu belirlemek

30 January 2017 tarihinde yayınlandı.