HTML, CSS ve JavaScript kullanarak Navbar oluşturma

[gameserverplay]

Metin2 EP, Valorant VP dahil tüm oyun ürünlerini en uygun fiyatlarla bulabilir, Item ve Karakterlerinizi hızlıca satabilirsiniz. HEMEN TIKLA!

​

Navbar nedir?​

Gezinti Çubuğu veya Gezinme Çubuğu , web sayfasındaki veya web sitesindeki bir öğedir. Kullanıcı arayüzünü bir sayfadan diğerine yönlendiren bağlantılar içerir. <nav> etiketi, tüm birincil çubukları, yani web sitesinin ana gezinmesini sarar. Dikey veya yatay olabilir.

Navbar'ın kodlama kısmını görelim.

 <div class="navbar"> 
  <div class="logo"> 
   <h1>Codewithrandom</h1> 
  </div> 
  <div class="nav__links"> 
   <a href="#home" class="active nav__link">Home</a> 
   <a href="#about" class="nav__link">About</a> 
   <a href="#contact" class="nav__link">Contact</a> 
  </div> 
 </div> 
 <div id="home" class="section"> 
  <h1>Home</h1> 
 </div> 
 <div id="about" class="section"> 
  <h1>About</h1> 
 </div> 
 <div id="contact" class="section"> 
  <h1>Contact</h1> 
 </div> 
 <script src="main.js"></script>

Bu HTML kodunda bir <div> tanımladık ve logo, navbar ve nav_links gibi sınıfları çağırdık. Ve başlığı Ana Sayfa, Hakkında, İletişim olarak tanımlayın. HTML çıktısına bakalım
Navbar için CSS yazmadan önce

Bu Çıktıda sadece HTML kısmını kodladık ve bu şekilde görünüyor ve gezinme çubuğunun çekici görünmesi için CSS'yi yazalım.

 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"); 
 * { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
  font-family: "Poppins", sans-serif; 
 } 
 body { 
  scroll-behavior: smooth; 
 } 
 .navbar { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 10px 50px; 
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2); 
  width: 100vw; 
  position: fixed; 
  background-color: white; 
  transition: all 0.5s ease-in-out; 
 }

Bu snippet'te yazı tiplerinin URL'sini içe aktardık ve tanımladık. Ve gövdeyi ve navbar'ı şekillendirdi. Bunu merkezde hizaladık. Stil gereklidir çünkü kullanıcı arayüzünün dikkatini çekmenin tek anahtarı budur.

 .logo h1 { 
  cursor: pointer; 
 } 
 .nav__links { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
 } 
 .nav__link { 
  margin: 0 10px; 
  color: black; 
  padding: 5px 15px; 
  border-radius: 100px; 
  transition: all 0.5s ease-in-out; 
  text-decoration: none; 
 } 
 .nav__link.active, 
 .nav__link:hover { 
  background-color: black; 
  color: white; 
 } 
 .section { 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
 } 
 .section:nth-child(odd) { 
  background-color: rgb(235, 235, 235); 
 }

Bu snippet'te, HTML kodunda çağırdığımız etiketi ve sınıfları biçimlendirdik. Hizalama, arka plan rengi, geçiş ve dolgu yardımı ile şekillendirdik.

Navbar için CSS yazdıktan sonra Output'u görelim.

​

 

[bLastX]

Paylaşım için teşekkürler.

 

[Carissa]

Paylaşım için teşekkürler.

 

[The Devil's Violinist]

Paylaşım için teşekkürler