Menü Oluşturma (Navbar)

Photo by Jackson Sophat on Unsplash

Menü oluşturma veya navbar (navigasyon çubuğu) oluşturma, web sitelerinde kullanıcıların sayfalar arasında gezinmesini sağlamak için yaygın olarak kullanılan bir yapıdır. Bu yapı, kullanıcıların belirli sayfalara hızlı erişimini sağlar. HTML ve CSS kullanarak basit bir menü veya daha karmaşık bir navigasyon çubuğu oluşturabilirsiniz.

HTML Yapısı

Menü veya navbar oluşturmak için <ul> (unordered list) ve <li> (list item) etiketlerini kullanırız. Ana menü öğelerini <li> içinde, alt menü öğelerini ise başka bir <ul> içinde tanımlarız.

<nav>
  <ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li>
      <a href="#">Hizmetler</a>
      <ul>
        <li><a href="#">Web Tasarım</a></li>
        <li><a href="#">Grafik Tasarım</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Yukarıdaki örnekte, <nav> etiketi menüyü tanımlar.
Ana menü öğeleri <li> etiketi içinde, alt menü öğeleri ise iç içe <ul> etiketleri içinde tanımlanır.
Her menü öğesi <a> etiketi ile bir bağlantıya yönlendirilir.

CSS Stillemesi

Navbar’ın görünümünü istediğiniz şekilde özelleştirmek için CSS kullanabilirsiniz. Örneğin, arka plan rengi, metin stil, hizalama, geçiş efektleri vb. gibi özellikleri CSS ile belirleyebilirsiniz.

CSS stillemesi için örnek bir kod:

nav {
  background-color: #f2f2f2;
}

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

li {
  display: inline-block;
  margin-right: 10px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #666;
}

Yukarıdaki CSS kodu, menü arka plan rengini ve öğelerin düzenini belirler. <ul> için varsayılan liste stili kaldırılır ve kenar boşlukları sıfırlanır. <li> öğeleri yatay olarak yan yana hizalanır ve sağa 10 piksel boşluk bırakılır. <a> etiketi için metin dekorasyonu kaldırılır ve renk ayarları yapılır. :hover pseudo-sınıfı kullanılarak fare üzerine gelindiğinde renk değişimi sağlanır.

Bu şekilde HTML ve CSS kullanarak temel bir menü veya navbar yapısı oluşturabilir ve özelleştirebilirsiniz. Daha karmaşık ve stilize menüler için CSS ve JavaScript kullanabilirsiniz. Hazır CSS çerçeveleri ve kütüphaneleri de kullanarak daha gelişmiş ve etkileyici menüler oluşturabilirsiniz.