Hover bilan ochiladigan menyular
CSS yordamida hover bilan ochiladigan menyu (dropdown) yaratishni o‘rganing.
Ochiladigan menyu (dropdown)
Ochiladigan menyu (dropdown) — foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi, ochilib-yopiladigan menyu:
O‘zingiz sinab ko‘ring »Hover bilan ochiladigan menyu yaratish
Foydalanuvchi sichqonchani element ustiga olib borganda paydo bo‘ladigan ochiladigan menyu yarating.
1-qadam) HTML qo‘shing:
Misol
<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>
Misol tahlili
Ochiladigan menyuni ochish uchun istalgan elementdan, masalan, <button>, <a> yoki <p> elementidan foydalaning.
Ochiladigan menyuni yaratish uchun konteyner elementdan (masalan, <div>) foydalaning va menyu havolalarini uning ichiga qo‘shing.
Ochiladigan menyuni CSS yordamida to‘g‘ri joylashtirish uchun tugma va <div> atrofini <div> elementi bilan o‘rang.
2-qadam) CSS qo‘shing:
Misol
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
O‘zingiz sinab ko‘ring »
Misol tahlili
Ochiladigan menyu tugmasiga background-color, padding va hokazolar yordamida uslub berdik.
.dropdown klassi position:relative dan foydalanadi — bu ochiladigan kontentni menyu tugmasining aynan ostiga (position:absolute yordamida) joylashtirish uchun kerak.
.dropdown-content klassi ochiladigan menyuning o‘zini saqlaydi. U standart holatda yashirin bo‘ladi va hover holatida ko‘rsatiladi (quyiga qarang). E’tibor bering, min-width 160px ga o‘rnatilgan. Uni bemalol o‘zgartirishingiz mumkin. Maslahat: Agar ochiladigan kontent kengligi menyu tugmasi kengligiga teng bo‘lishini istasangiz, width ni 100% ga o‘rnating (kichik ekranlarda aylantirishni yoqish uchun esa overflow:auto ni ham).
Chegara (border) o‘rniga ochiladigan menyuni "karta"ga o‘xshatish uchun box-shadow xossasidan foydalandik. Shuningdek, menyuni boshqa elementlar oldiga joylashtirish uchun z-index’dan foydalanamiz.
:hover selektori foydalanuvchi sichqonchani menyu tugmasi ustiga olib borganda ochiladigan menyuni ko‘rsatish uchun ishlatiladi.
O‘ngga tekislangan ochiladigan menyu
Navigatsiya panelidagi ochiladigan menyu
Maslahat: Ochiladigan menyular haqida ko‘proq bilish uchun CSS dropdown darsligimizga o‘ting.
Maslahat: Bosish bilan ochiladigan menyular haqida ko‘proq bilish uchun Bosish bilan ochiladigan menyular sahifasiga o‘ting
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!