W3.CSS Açılır Listeleri
W3.CSS Açılır Sınıfları
W3.CSS aşağıdaki açılır sınıfları sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-açılır-açılır-hover | Üzerine gelinebilir bir açılır öğe |
| w3-açılır-içerik | Görüntülenecek açılır kısım |
| w3-açılır-tıklama | Tıklanabilir bir açılır öğe |
Açılır Öğeler
w3-dropdown-hover sınıfı , üzerine gelinebilir bir açılır liste öğesi tanımlar.
w3-dropdown-content sınıfı , görüntülenecek açılır içeriği tanımlar.
Örnek
<div class="w3-dropdown-hover">
<button class="w3-button">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Hem üzerine gelinebilir öğe hem de açılır içerik öğesi, herhangi bir HTML öğesi olabilir.
Yukarıdaki örnekte, vurgulu öğe bir <button> ve açılır içerik bir <div> idi.
Sonraki örnekte, vurgulu öğe bir <p>'dir ve açılır içerik bir <span>'dir:
Örnek
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
Menü Açılır Menüleri
w3-dropdown-hover sınıfı , açılır menülere sahip gezinme çubukları oluşturmak için mükemmeldir:
Örnek
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<div class="w3-dropdown-hover">
<button
class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Not: Bu öğreticide daha sonra Gezinme Çubukları hakkında daha fazla bilgi edineceksiniz .
Tıklanabilir Açılır Menüler
w3-dropdown-click sınıfı , tıklanabilir bir açılır öğe oluşturur.
Bu sınıfla, açılır menü JavaScript tarafından açılır:
Örnek
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
<div id="Demo" class="w3-dropdown-content
w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Görüntü Açılır Listeleri
Fareyi resmin üzerine getirin:
Örnek
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div
class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
</div>
</div>
Kart Açılır Listeleri
Fareyi aşağıdaki şehirlerden birinin üzerine getirin:
Londra, İngiltere'nin başkentidir.
9 milyonu aşan nüfusu ile Birleşik Krallık'ın en kalabalık şehridir.
Tokyo is the capital city of Japan.
13 million inhabitants.
Örnek
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:250px">
<img src="img_london.jpg"
alt="London" style="width:100%">
<div
class="w3-container">
<p>London is the
capital city of England.</p>
<p>It is the
most populous city in the UK.</p>
</div>
</div>
</div>
Animasyonlu Açılır Menü
Açılır içeriği soldurmak, yakınlaştırmak veya kaydırmak için w3-animate- sınıflarından herhangi birini kullanın :
Örnek
<div class="w3-dropdown-click">
<button onclick="myFunction()"
class="w3-button">Click Me</button>
<div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#"
class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Sağa hizalanmış Açılır Menü
Açılır menüyü sağa kaydırmak için w3-right sınıfını kullanın. Açılır içeriği konumlandırmak için CSS'yi kullanın ( right:0 , açılır menünün soldan sağa yerine sağdan sola gitmesini sağlar):
Örnek
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content
w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>