Mega menyu
Mega menyu (navigatsiya panelidagi to‘liq kenglikdagi ochiladigan menyu) yaratishni o‘rganing.
Mega menyu
Mega menyu 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">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</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 class="dropdown-content">) foydalaning, unga grid (ustunlar) qo‘shing va menyu havolalarini grid ichiga joylashtiring.
Ochiladigan menyuni CSS yordamida to‘g‘ri joylashtirish uchun tugma va konteyner element (<div class="dropdown-content">) atrofini <div class="dropdown"> 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: 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;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
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-content klassi ochiladigan menyuning o‘zini saqlaydi. U standart holatda yashirin bo‘ladi va hover holatida ko‘rsatiladi (quyiga qarang). U menyu tugmasining aynan ostida ko‘rinadigan qilib joylashtirilgan, kengligi esa butun ekranni qoplashi uchun 100% ga o‘rnatilgan.
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.
.column klasslari ochiladigan menyu ichida yonma-yon joylashadigan uchta ustun yaratish uchun ishlatiladi (turli kategoriyalarni ko‘rsatish uchun).
Moslashuvchan mega menyu
Misol
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
O‘zingiz sinab ko‘ring »
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!