Nasıl Oluşturulur: Açılır menü ile yanıtlayıcı navigasyon çubuğu
- Önceki sayfa Kenar gezinti çubuğundaki açılır menü
- Sonraki sayfa Alt gezinti menüsü
Açılır menü ile yanıtlayıcı navigasyon çubuğu nasıl oluşturulur öğrenin.
Açılır menü ile yanıtlayıcı üst navigasyon çubuğu
Yanıtlayıcı bir üst navigasyon çubuğu ile açılır menü oluşturma
Adım 1 - HTML Ekle:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
İkinci Adım - CSS Ekle:
/* Üst navigasyon için siyah arka plan rengi ekleyin */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Navigasyon çubuğundaki bağlantı stillerini ayarlayın */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Geçerli sayfayı vurgulamak için bir etkin sınıf ekleyin */
.active {
background-color: #04AA6D;
color: beyaz;
}
/* Küçük ekranlarda, üst navigasyonu açmak ve kapatmak için bağlantıları gizleyin */
.topnav .icon {
display: none;
}
/* Açılır menü konteyneri - açılır menü içeriğini konumlandırmak için kullanılır */
.dropdown {
float: left;
overflow: hidden;
}
/* Açılır menü düğmesinin stillerini ayarlayın, böylece üst navigasyon çubuğuna uyum sağlasın */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: beyaz;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Açılır menü içeriğinin stillerini ayarlayın (varsayılan olarak gizli olarak ayarlanmıştır) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Açılır menü içindeki bağlantı stillerini ayarlayın */
.dropdown-content a {
float: none;
color: siyah;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Farettende mouse üzerindeyken, üst navigasyon bağlantıları ve açılır menü düğmelerine koyu arka plan ekleyin */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: beyaz;
}
/* Farettende mouse üzerindeyken, açılır menü bağlantılarına gri arka plan ekleyin */
.dropdown-content a:hover {
background-color: #ddd;
color: siyah;
}
/* Kullanıcı, aşağı açılır menü düğmesine fareni götürdüğünde, açılır menüyü göster */
.dropdown:hover .dropdown-content {
display: block;
}
/* Ekran genişliği 600 pikselden küçük olduğunda, ilk bağlantıdan ("Ana Sayfa") başka tüm bağlantıları gizleyin. Üst navigasyon çubuğunu açmak ve kapatmak için bağlantıyı gösterin */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* Kullanıcı simgesine tıkladığında, "responsive" sınıfını ekleyerek üst navigasyon çubuğuna JavaScript ekler. Bu sınıf, küçük ekranlarda üst navigasyon çubuğunun daha iyi görünmesini sağlar (bağlantıları dikey olarak değil, yatay olarak gösterir) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Üçüncü adım - JavaScript ekleyin:
/* Kullanıcı simgesine tıkladığında, "responsive" sınıfını eklemek ve silmek arasında değişiklik yaparak üst navigasyon çubuğunda geçiş yapın */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
İlgili sayfalar
Eğitim:CSS açılır menü
Eğitim:Tıklanabilir açılır menü nasıl oluşturulur
Eğitim:CSS gezinti çubuğu
- Önceki sayfa Kenar gezinti çubuğundaki açılır menü
- Sonraki sayfa Alt gezinti menüsü
