HTML, CSS ve JavaScript kullanarak Navbar oluşturma

gameserverplay

⭕️⭕️\_____/⭕️⭕️
Katılım
21 Eki 2013
Konular
3,135
Mesajlar
7,770
Online süresi
4ay 15g
Reaksiyon Skoru
5,372
Altın Konu
67
Başarım Puanı
409
Yaş
36
TM Yaşı
12 Yıl 6 Ay 3 Gün
MmoLira
1,207
DevLira
0

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.

HTML Kodu::
 <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.

CSS Kodu::
 @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.

CSS Kodu::
 .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.


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

Şu an konuyu görüntüleyenler (Toplam : 1, Üye: 0, Misafir: 1)