CSS Menü Yapımı

CSS menü yapımı için gerekli olan HTML ve CSS kodlarını verdikten sonra dikey menü yapımı ve yatay menü yapımı adım adım anlatılmıştır.

Yatay veya dikey menü yapımı için çoğunlukla <ul> ve <li> etiketleri kullanılır.

<ul>
  <li><a href="index.html">Anasayfa</a></li>
  <li><a href="duyurular.html">Duyurular</a></li>
  <li><a href="hakkimizda.html">Hakkımızda</a></li>
  <li><a href="iletisim.html">İletişim</a></li>
</ul>

<ul> ve <li> etiketi varsayılan olarak liste işareti iç ve dış boşluk eklenerek gelir.

Varsayılanı kaldırmak için

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

Yukardaki HTML ve CSS kodları yatay menü ve dikey menü yapımı için gereken standart kodlardır.

Dikey menü yapımı

Yukardaki kodlarla aslında dikey menü yaptık. Yaptığımız dikey menüye çeşitli stil vererek daha güzel görünmesini sağlayabiliriz.

li a {
    display: block;
    width: 200px;
    background-color: #f1f1f1;
    color: #000000;
    padding: 8px 16px;
    text-decoration: none;
}

Yukardaki CSS kodları ile menü bağlantılarına;

block ile görünümü blok seviyesi yaptık,
width ile bağlantılara genişliği verdik,
background-color ile arka plan verdik,
color ile bağlantılara renk verdik,
padding ile bağlantılar arası boşluk bıraktık,
text-decoration ile bağlantıların alt çizgisini kaldırdık.

Menüye hareket katmak

Dikey menümüzü oluşturduk fakat hangi bağlantıya tıkladığımız tam olarak belli olmuyor.

li a:hover {
    background-color: #888888;
    color: white;
}

Yukardaki kodlar ile menüdeki bağlantıların üzerine gelindiğinde arka plan rengi ve yazı rengi değişecektir.

Aktif sayfayı belirtmek

Kullanıcının hangi sayfada olduğunu belirtmek isteyebiliriz.

.aktif {
    background-color: #1A3680;
    color: white;
}

aktif adında bir CSS sınıfı oluşturduk ve diğer bağlantı etiketlerinden farklı bir arka plan rengi verdik.

Dikey menü HTML kodları

<ul>
  <li><a class="aktif" href="index.html">Anasayfa</a></li>
  <li><a href="duyurular.html">Duyurular</a></li>
  <li><a href="hakkimizda.html">Hakkımızda</a></li>
  <li><a href="iletisim.html">İletişim</a></li>
</ul>

Dikey menü CSS kodları

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

li a {
    display: block;
    width: 200px;
    background-color: #f1f1f1;
    color: #000000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #888888;
    color: white;
}

.aktif {
    background-color: #1A3680;
    color: white;
}

Yatay menü yapımı

Yatay menü yapımının çeşitli yöntemleri var.

Bağlantıları satır içi yapmak

Yatay menü yapmak için <li> etiketini satır içi görünümüne çevirmemiz gerekiyor.

li {
    display: inline;
}

Bağlantılara float özelliği vermek

Yatay menü yapmak için <li> etiketine CSS float özelliği vererek yapabiliriz.

li {
    float: left;
}

float özelliği verdiğimizde bağlantılar birbirine çok yakın ve menüden sonra gelen içerik menünün yanında gözükecektir.

Bu sorun için <ul> ve bağlantı etiketine çeşitli CSS kuralları uygulamamız gerekiyor.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

overflow:hidden CSS kuralı ile menüden sonra gelen içerik artık menünün altında gözükecektir.

li a {
    display: block;
    padding: 14px 16px;
    background-color: #ccc;
    text-decoration: none;
    color: #000000;
}

padding CSS kuralı ile menü bağlantılarını birbirinden uzaklaştırdık.

Yatay menü oluşturmuş olduk dikey menü yapımındaki gibi menüye hareket katabilir ve aktif sayfa için özel CSS sınıfı oluşturabiliriz.

Yatay menü HTML kodları

<ul>
  <li><a class="aktif" href="index.html">Anasayfa</a></li>
  <li><a href="duyurular.html">Duyurular</a></li>
  <li><a href="hakkimizda.html">Hakkımızda</a></li>
  <li><a href="iletisim.html">İletişim</a></li>
</ul>

Yatay menü CSS kodları

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float:left;
}

li a {
    display: block;
    padding: 14px 16px;
    background-color: #ccc;
    text-decoration: none;
    color: #000000;
}

li a:hover {
    background-color: #888888;
    color: white;
}

.aktif {
    background-color: #1A3680;
    color: white;
}

Artık sizde dikey veya yatay menü yapabilirsiniz.

Hayırlı günler dilerim.