Yuqoriga ochiladigan menyu
CSS yordamida yuqoriga ochiladigan menyu (dropup) yaratishni o‘rganing.
Yuqoriga ochiladigan menyu (dropup)
Yuqoriga ochiladigan menyu (dropup) — foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi, ochilib-yopiladigan menyu:
O‘zingiz sinab ko‘ring »Hover bilan yuqoriga ochiladigan menyu yaratish
Foydalanuvchi sichqonchani element ustiga olib borganda paydo bo‘ladigan yuqoriga ochiladigan menyu yarating.
1-qadam) HTML qo‘shing:
Misol
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Misol tahlili
Yuqoriga ochiladigan menyuni ochish uchun istalgan elementdan, masalan, <button>, <a> yoki <p> elementidan foydalaning.
Yuqoriga ochiladigan menyuni yaratish uchun konteyner elementdan (masalan, <div>) foydalaning va menyu havolalarini uning ichiga qo‘shing.
Yuqoriga ochiladigan menyuni CSS yordamida to‘g‘ri joylashtirish uchun tugma va <div> atrofini <div> elementi bilan o‘rang.
2-qadam) CSS qo‘shing:
Misol
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropup content */
.dropup {
position: relative;
display: inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position: absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
O‘zingiz sinab ko‘ring »
Misol tahlili
Menyu tugmasiga background-color, padding va hokazolar yordamida uslub berdik.
.dropup klassi position:relative dan foydalanadi — bu menyu kontentini tugmaning tepasiga (position:absolute yordamida) joylashtirish uchun kerak.
.dropup-content klassi yuqoriga 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 menyu kontenti kengligi tugma 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 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 yuqoriga ochiladigan menyuni ko‘rsatish uchun ishlatiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!