Bosish bilan ochiladigan menyular
CSS va JavaScript yordamida bosish bilan ochiladigan menyu 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 »Bosish bilan ochiladigan menyu yaratish
Foydalanuvchi tugmani bosganda paydo bo‘ladigan ochiladigan menyu yarating.
1-qadam) HTML qo‘shing:
Misol
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" 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: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 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 (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
Misol tahlili
Ochiladigan menyu tugmasiga background-color, padding, hover effekti 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.
3-qadam) JavaScript qo‘shing:
Misol
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
O‘zingiz sinab ko‘ring »
O‘ngga tekislangan ochiladigan menyu
Navigatsiya panelidagi ochiladigan menyu
Qidiruvli (filtrli) ochiladigan menyu
Maslahat: Ochiladigan menyular haqida ko‘proq bilish uchun CSS dropdown darsligimizga o‘ting.
Maslahat: Hover bilan ochiladigan menyular haqida ko‘proq bilish uchun Hover bilan ochiladigan menyular sahifasiga o‘ting
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!