Nasıl Yapılır - En İyi Gezinme
CSS ile bir üst gezinme çubuğunun nasıl oluşturulacağını öğrenin.
Üst Gezinme Çubuğu
Bir Üst Gezinme Çubuğu Oluşturun
Adım 1) HTML'yi ekleyin:
Örnek
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
Adım 2) CSS'yi ekleyin:
Örnek
/*
Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add
a color to the active/current link */
.topnav
a.active {
background-color: #04AA6D;
color: white;
}
İpucu: Mobil uyumlu, duyarlı gezinme çubukları oluşturmak için Nasıl Yapılır - Duyarlı Üst Gezinme eğiticimizi okuyun.
İpucu: Gezinme çubukları hakkında daha fazla bilgi edinmek için CSS Navbar Eğitimimize gidin.
W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok