Nasıl Oluşturulur: Menüdeki Giriş Alanı

Navigasyon çubuğuna nasıl giriş alanı eklenir

Adım 1 - HTML Ekle:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

İkinci adım - CSS Ekle:

* {box-sizing: border-box;}
/* Navigasyon çubuğunun stillerini ayarla */
.topnav {
  aşırı: gizli;
  arka_plan_rengi: #e9e9e9;
}
/* Navigasyon çubuğu bağlantılarının stillerini ayarla */
.topnav a {
  yüzeysel: sol;
  görüntüleme: blok;
  renk: siyah;
  text-align: ortasal;
  yükleme: 14px 16px;
  yazı_ozellik: none;
  yazı_boyutu: 17px;
}
/* Fare'nin navigasyon çubuğu bağlantıları üzerine gelmesi durumundaki stilleri ayarla */
.topnav a:hover {
  arka_plan_rengi: #ddd;
  renk: siyah;
}
/* Geçerli/aktif bağlantının stillerini ayarla */
.topnav a.active {
  arka_plan_rengi: #2196F3;
  renk: beyaz;
}
/* Arama çubuğu konteynerinin stillerini ayarla */
.topnav .search-container {
  yüzeysel: sağ;
}
/* Navigasyon çubuğundaki giriş kutusunun stillerini ayarla */
.topnav input[type=text] {
  yükleme: 6px;
  marj_üst: 8px;
  yazı_boyutu: 17px;
  çizgi: yok;
}
/* Arama çubuğu konteynerindeki düğme stillerini ayarla */
.topnav .search-container button {
  yüzeysel: sağ;
  yükleme: 6px;
  marj_üst: 8px;
  marj_sag: 16px;
  arka_plan: #ddd;
  yazı_boyutu: 17px;
  çizgi: yok;
  farklılaştırıcı: işaretçi;
}
.topnav .search-container button:hover {
  arka_plan: #ccc;
}
/* Yanıtlayıcı ekran ekleniyor - Küçük ekranlarda, navigasyon çubuğu dikey olarak değil, yatay olarak görüntülenir */
@media ekran ve (en fazla genişlik: 600px) {
  .topnav .search-container {
    yüzeysel: yok;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    yüzeysel: yok;
    görüntüleme: blok;
    text-align: sol;
    genişlik: 100%;
    marj: 0;
    yükleme: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

Kendi kendine deney