css-dropdown

CSS ile beklenebilir bir açılır liste oluşturun.
Temel Açılır
Kullanıcı fareyi bir öğe üzerinde hareket ettirdiğinde görünen bir açılır kutu oluşturun.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

</body>
</html>
Örnek Açıklamalı
HTML) Açılır içeriği açmak için herhangi bir öğeyi kullanın (ör. <Span> veya <button> öğesi).
Açılır içeriği oluşturmak ve içinde istediğiniz şeyi eklemek için bir konteyner öğesi kullanın (<div> gibi).
Açılır içeriği CSS ile doğru şekilde konumlandırmak için, öğelerin etrafında bir <div> öğesi kaydırın.
CSS).dropdown sınıfı kullanır position:relativebiz açılan içeriği doğru kullanarak açılır düğmesinin (aşağıda yerleştirilmesini istediğiniz zaman gereklidir ki, position:absolute).
.dropdown-contentSınıf fiili açılan içeriğini bulundurur. Varsayılan olarak gizlidir ve üzerine geldiğinde görüntülenir (aşağıya bakın). Not min-width160px olarak ayarlandı. Bunu değiştirmek için çekinmeyin. İpucu: Açılır pencerenin genişliğinin açılır menüden geniş olmasını istiyorsanız, width% 100'e ayarlayın (ve overflow:autoküçük ekranlarda gezinmeyi etkinleştirin).
Bir kenarlık kullanmak yerine box-shadow, açılır menüyü bir "kart" benzetmesi için CSS mülkünü kullandık .
:hoverSeçici kullanıcı açılır düğmesinin üzerine fareyi hareket ettirdiğinde açılır menüyü göstermek için kullanılır.

Aşağıya doğru açılan menü
Kullanıcının bir listeden bir seçenek seçmesini sağlayan bir açılır menü oluşturun:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Açılır menüyü açmak için fareyi düğmenin üzerine getirin.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p><strong>Note:</strong> </p>
</body>
</html>

Sağa hizalı Dropdown İçeriği
Açılır menüden soldan sağa gitmek yerine sağdan sola gitmek istiyorsanız right: 0;
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hizalanmış Düşüş İçeriği</h2>
<p>Açılır içeriğin soldan sağa mı yoksa sağdan sola mı sağdan sola mı gitmesi gerektiğini belirleyin.</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>