CSS ochiluvchi menyular
CSS ochiluvchi menyulari
CSS ochiladigan menyulari foydalanuvchi tugma yoki navigatsiya havolasi kabi elementni bosganda yoki kursorni olib kelganida variantlar yoki kontent ro‘yxatini ko‘rsatish uchun ishlatiladi.
CSS ochiluvchi menyusi ishga tushiruvchi elementdan (masalan, <div>, <button>, <p>, <a> va h.k.) iborat.
Trigger element bosilganda yoki sichqoncha olib borilganda ochiladigan (dropdown) kontent ko‘rsatiladi.
Dropdown kontenti yashirilgan kontentni (matn, havolalar, rasmlar va h.k. bo‘lishi mumkin) saqlaydigan konteyner element (masalan <div>)dir.
Quyidagi uchta CSS dropdown misoli sichqonchasini ustiga olib boring:
Matnli CSS ochiladigan quti
Bu yerda foydalanuvchi sichqonchani <div> element ustiga olib borganda paydo bo‘ladigan matnli dropdown qutisini yaratamiz.
Misol
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">Mouse over me!
<div class="dropdown-content">Hello World!</div>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
- .dropdown klassi
position:relativedan foydalanadi — dropdown kontentni trigger elementning hozirgina ostiga joylashtirmoqchi bo‘lsak bu kerak (dropdown kontentposition:absoluteishlatadi). - .dropdown-content klassi dropdown kontentni saqlaydi. U standart holda yashirin va hover paytida ko‘rsatiladi.
width.php">min-xossasi 130px ga o‘rnatilgan. Uni erkin o‘zgartiring! Dropdown kontent kengligi trigger element kengligiday bo‘lishini xohlasangiz, width ni 100% qilib belgilang va kichik ekranlarda skroll yoqish uchunwidthoverflow:autoqiling.- Chegaradan foydalanish o‘rniga, dropdown kontentni "karta" ko‘rinishida ko‘rsatish uchun
box-shadowxossasidan foydalanamiz. :hoverselektori foydalanuvchi sichqonchani <div class="dropdown"> element ustiga olib borganda dropdown kontentini ko‘rsatish uchun ishlatiladi.
CSS ochiluvchi menyu
Foydalanuvchiga ro‘yxatdan variant tanlash imkonini beruvchi dropdown menyu yaratish:
Bu misol oldingisiga o‘xshaydi, faqat dropdown qutisi ichiga tugma va havolalar qo‘shamiz va ularni dropdown tugmaga mos ushlab kelamiz:
Misol
<style>
.dropdown {
position: relative;
}
/* Style the dropdown button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown content */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside dropdown content */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the
dropdown content on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change background color of dropdown
button on hover */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown
Menu</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!