Yuqori navigatsiyadagi ochiladigan menyu
Ochiladigan menyuli navigatsiya panelini yaratishni o‘rganing.
Navigatsiya panelidagi ochiladigan menyu
Ochiladigan menyuli navigatsiya panelini yaratish
Foydalanuvchi sichqonchani navigatsiya paneli ichidagi element ustiga olib borganda paydo bo‘ladigan ochiladigan menyu yarating.
1-qadam) HTML qo‘shing:
Misol
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</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
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
O‘zingiz sinab ko‘ring »
Misol tahlili
Navigatsiya paneli va uning havolalariga background-color, padding va hokazolar yordamida uslub berdik.
Ochiladigan menyu tugmasiga background-color, padding va hokazolar yordamida uslub berdik.
.dropdown klassi .dropdown-content uchun konteyner hisoblanadi. Bu <a> emas, balki <div> elementi bo‘lgani uchun havolalar yonida turishini ta’minlash maqsadida unga float berishimiz 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.
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.
Navigatsiya panelida bosish bilan 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
Maslahat: Navigatsiya panellari haqida ko‘proq bilish uchun CSS navigatsiya paneli darsligimizga o‘ting.
Maslahat: Moslashuvchan navigatsiya panelini qanday yaratishni bilish uchun Moslashuvchan yuqori navigatsiya sahifasiga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!