W3.CSS dropdown’lar
Hover’da ochiladigan dropdown’lar
Dropdown’lar (ochiluvchi menyular) foydalanuvchi element ustiga sichqonchani olib borganda yoki uni bosganda qo‘shimcha kontentni ko‘rsatadi.
W3.CSS hover’da ham, bosilganda ham ochiladigan dropdown’lar uchun klasslarni taqdim etadi.
w3-dropdown-hover klassi hover’da ochiladigan dropdown yaratadi.
w3-dropdown-content klassi paydo bo‘ladigan kontentni belgilaydi.
Misol
<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>
Hover qilinadigan element ham, dropdown kontenti elementi ham istalgan HTML elementi bo‘lishi mumkin.
Yuqoridagi misolda hover qilinadigan element <button>, dropdown kontenti esa <div> edi.
Keyingi misolda hover qilinadigan element <p>, dropdown kontenti esa <span>:
Misol
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
Dropdown menyular
Dropdown menyu yaratish uchun dropdown’larni bar ichiga joylashtirish mumkin:
Misol
<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">About</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>
Navigatsiya panellari haqida ushbu darslikning keyingi qismlarida ko‘proq bilib olasiz.
Bosilganda ochiladigan dropdown’lar
w3-dropdown-click klassi bosilganda ochiladigan dropdown yaratadi.
w3-show klassini qo‘shish yoki olib tashlash uchun JavaScript’dan foydalaniladi:
Misol
<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-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() {
document.getElementById("demo").classList.toggle("w3-show");
}
</script>
O‘ngga tekislangan dropdown’lar
Misol
<div class="w3-flex" style="justify-content:flex-end">
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">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>
</div>
w3-flex klassi kontentni o‘ngga (flex-end) tekislaydi.
right:0 dropdown kontentini tugmaning o‘ng cheti bilan tekislaydi.
Rasmli dropdown
Dropdown rasmning kattaroq versiyasini ko‘rsatishi mumkin:
Sichqonchani rasm ustiga olib boring:
Misol
<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>
Kartochkali dropdown’lar
Sichqonchani quyidagi shaharlardan biri ustiga olib boring:
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tokyo is the capital city of Japan.
It has 13 million inhabitants.
Misol
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content w3-card-4" style="width:300px">
<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>
Animatsiyali dropdown
Dropdown kontentini asta paydo qilish (fade), kattalashtirish (zoom) yoki siljitib chiqarish (slide) uchun istalgan w3-animate- klassidan foydalaning:
Misol
<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>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!