HTML, CSS ve JavaScript kullanarak Navbar oluşturma

gameserverplay · 20 Eki 2023

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.
[CODE title="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> [/CODE]

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.

[CODE title="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;
} [/CODE]

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.

[CODE title="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);
} [/CODE]

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.