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!