HTML'de Basit Navigasyon Çubuğu Nasıl Yapılır

HTML'de Basit Navigasyon Çubuğu Nasıl Yapılır?

Web sitelerinde gezinmeyi kolaylaştıran navigasyon çubukları (navbar), kullanıcı deneyimini doğrudan etkiliyor. Bu yazıda, sadece HTML ve CSS kullanarak sade ve işlevsel bir navigasyon menüsünün nasıl oluşturulacağını adım adım ele alıyoruz.

1. HTML Yapısını Kurmak

Navigasyon çubuğu genellikle <nav> etiketi içinde yer alır. Linkler ise bir liste (<ul> ve <li>) olarak düzenlenir:

<nav>
  <ul>
    <li><a href="#home">Ana Sayfa</a></li>
    <li><a href="#hakkimizda">Hakkımızda</a></li>
    <li><a href="#iletisim">İletişim</a></li>
  </ul>
</nav>

Bu yapı, listeler kullanarak linklerin düzenli ve erişilebilir olmasını sağlar.

2. CSS ile Stil ve Yerleşimi Ayarlamak

HTML yapısını oluşturduktan sonra, CSS ile navigasyonun görünümünü düzenleyebiliriz:

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ddd;
  color: black;
}

NAV elementinin sabitlenmesi veya aktif bağlantı rengi gibi detaylar da eklenebilir.

3. Tarayıcı Uyumluluğu ve Semantik Kullanım

<nav> etiketi, ekran okuyucular ve SEO açısından navigasyon bölümlerini semantik olarak işaretlemek için idealdir. Bu sayede erişilebilirlik ve arama motoru optimizasyonu artar.

Sonuç

Bu adımlarla sade ama işlevsel bir navigasyon çubuğu oluşturabilirsin. Üstelik öğelerin yerleşimi ve renkler üzerinde oynamak da oldukça kolay. Responsive (mobil uyumlu) bir tasarım istersen, hamburger menü gibi ek özellikler de ekleyebilirsin.

Yararlı olması dileğiyle — iyi çalışmalar!