CSS Navigation Bar (Gezinme Çubuğu – Menü)

Web tasarım kursumuzun CSS derslerine menülerle devam ediyoruz. Herkese başarılar dilerim.

Web tasarımlarımızda basit ancak etkili menüler kullanmak, sitemizin kullanışlı olması açısından önemlidir.

CSS ile sıkıcı, düzensiz ve kötü görünümlü menüleri basit dokunuşlarla son derece şık ve işlevsel hâle getirebilirsiniz.

Gezinme Çubuğuna Bağlantı Vermek

Bir gezinme çubuğunu meydana getirebilmek için bir takım HTML öğelerine ihtiyaç duyarız.

Bu HTML öğeleri gezinme çubuğumuzun iskeletini oluşturur.

Artık biliyorsunuz ki HTML tek başına bir site meydana getiremez. Aynı şekilde CSS de tek başına bir site meydana getiremez.

Ancak HTML ve CSS’in birleşmesiyle ortaya güzel ve anlamlı bir site çıkarılabilir.

Bir gezinme çubuğu (menü) meydana getirirken şimdilik iki HTML öğesi kullanacağız: <ul> ve <li>.

Öncelikle basit bir menünün kodlarını sizlerle paylaşıp, daha sonra kullandığımız bu öğelerin tam olarak ne işe yaradıklarını inceleyelim:

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

Şimdi de CSS yardımıyla HTML’de varsayılan olarak gelen madde işaretlerini ve liste boşluklarını kaldırarak daha düzenli bir görüntü elde edelim:

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

Örneğin açıklaması:

list-style-type: none; – HTML’de varsayılan olarak gelen madde işaretlerini ortadan kaldırmamıza yardım eder
margin: 0; ve padding: 0; – Listeyle birlikte varsayılan olarak gelen kenar boşluklarını ve soldaki girintiyi kaldırır

Yukarıdaki kodlar hem yatay hem de dikey menülerin ortak başlangıç noktasıdır.

Dikey Menü

Dikey bir menü elde edebilmek için yukarıdaki CSS koduna bir öğe daha eklememiz gerekecek: <a> öğesi.

li a {
    display: block;
    width: 60px;
}

Örnek açıklaması:

display: block; – Bağlantıları blok öğe olarak görüntüler. Böylece yalnızca metne değil, bağlantının kapladığı alanın tamamına tıklandığında da bağlantı çalışır. Ayrıca bağlantıya boyut verebilmemizi sağlar
width: 60px; – Blok öğe hâline getirdiğimiz bağlantının genişliğini ayarlar. Bu örnekte genişlik 60px olarak ayarlanmıştır

Genişliği her bağlantıya ayrı ayrı vermek yerine <ul> öğesine de verebilirsiniz; bağlantılar blok öğe olduğu için listenin genişliğini doldurur:

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

li a {
    display: block;
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.