Html Navbar nedir? Kullanımı

HTML Navbar, bir web sayfasındaki navigasyonu kolaylaştırmak için kullanılan bir araçtır. Navbar, genellikle web sayfasının üst kısmında yer alır ve web sitesindeki farklı bölümlere kolayca erişim sağlar. Navbar, genellikle menü öğelerinin bir listesi şeklinde tasarlanır ve CSS ile biçimlendirilebilir.

Aşağıda bir HTML Navbar kullanım örneği verilmiştir:

<nav class="navbar">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">Ürünlerimiz</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Bu örnekte, “nav” etiketi ile bir Navbar oluşturuldu. Navbar’ın içinde bir “ul” (unordered list) bulunur ve bu listenin her öğesi bir menü öğesi temsil eder. Her menü öğesi, bir “a” (anchor) etiketi içerir ve bu etiketler, öğenin tıklanabilir olduğunu belirtir ve öğenin tıklanınca yönlendirileceği sayfanın bağlantısını içerir.

Bu Navbar, CSS ile birlikte stilize edilebilir. Aşağıda bir örnek CSS kodu verilmiştir:

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin: 0;
  padding: 0;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111;
}

Bu CSS kodu, Navbar’ı siyah bir arka plan rengi ile ve beyaz yazı rengi ile stilize eder. “ul” etiketi içindeki öğeler yatay olarak hizalanır. Navbar öğeleri, fare imlecine gelindiğinde arka plan rengi değiştirir. Bu örnek, bir Navbar’ın nasıl oluşturulacağı ve CSS ile nasıl stilize edileceği hakkında bir fikir verir.

Bunu Paylaş