Nasıl Yapılır - Navbar'da Daha Fazla Düğme
"Daha fazla" düğmesini nasıl oluşturacağınızı öğrenin.
Navbar'da "Daha Fazla" Düğmesi
Bir Açılır Gezinme Çubuğu Oluşturun
Kullanıcı fareyi gezinme çubuğunun içindeki bir öğenin üzerine getirdiğinde görünen bir açılır menü oluşturun.
Adım 1) HTML'yi ekleyin:
Örnek
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<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>
</div>
Örnek Açıklama
Açılır menüyü açmak için herhangi bir öğeyi kullanın, örneğin bir <button>, <a> veya <p> öğesi.
Açılır menüyü oluşturmak ve içine açılan bağlantıları eklemek için bir kapsayıcı öğesi (<div> gibi) kullanın.
Açılır menüyü CSS ile doğru şekilde konumlandırmak için düğmenin ve <div> öğesinin etrafına bir <div> öğesi sarın.
Adım 2) CSS'yi ekleyin:
Örnek
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Örnek Açıklama
Gezinme çubuğunu ve gezinme çubuğu bağlantılarını arka plan rengi, dolgu vb. ile biçimlendirdik.
Açılır düğmeyi arka plan rengi, dolgu vb. ile biçimlendirdik.
Sınıf .dropdown
, için kapsayıcıdır
.dropdown-content
. Bu bir <div> öğesi olduğundan ve bir <a> öğesi olmadığından, bağlantıların yanında kalmasını sağlamak için onu yüzdürmemiz gerekir.
Sınıf .dropdown-content
, gerçek açılır menüyü tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görüntülenecektir (aşağıya bakın). min-width
160 piksel olarak ayarlandığını unutmayın . Bunu değiştirmekten çekinmeyin.
Kenarlık kullanmak yerine, box-shadow
açılır menüyü bir "kart" gibi göstermek için özelliği kullandık. Ayrıca, açılır menüyü diğer öğelerin önüne yerleştirmek için z-endeksini kullanırız.
Seçici :hover
, kullanıcı fareyi açılır düğmenin üzerine getirdiğinde açılır menüyü göstermek için kullanılır.
İlgili Sayfalar
İpucu: Açılır menüler hakkında daha fazla bilgi edinmek için CSS Açılanlar Eğitimimize gidin .
İpucu: Tıklanabilir açılır menüler hakkında daha fazla bilgi edinmek için Tıklanabilir Açılır Listelerimize gidin
İpucu: Gezinme çubukları hakkında daha fazla bilgi edinmek için CSS Navbar Eğitimimize gidin.
İpucu: Duyarlı bir gezinme çubuğunun nasıl oluşturulacağını öğrenmek için Duyarlı Üst Gezinmemize gidin.