कैसे करें - मेगा मेनू
मेगा मेनू बनाने का तरीका जानें (नेविगेशन बार में पूर्ण-चौड़ाई वाला ड्रॉपडाउन मेनू)।
मेगा मेनू
एक मेगा मेनू बनाएं
एक ड्रॉपडाउन मेनू बनाएं जो तब प्रकट होता है जब उपयोगकर्ता माउस को नेविगेशन बार के अंदर किसी तत्व पर ले जाता है।
चरण 1) HTML जोड़ें:
उदाहरण
<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>
उदाहरण समझाया गया
ड्रॉपडाउन मेनू खोलने के लिए किसी भी तत्व का उपयोग करें, जैसे <बटन>, <a> या <p> तत्व।
ड्रॉपडाउन मेनू बनाने और ग्रिड (कॉलम) जोड़ने और ग्रिड के अंदर ड्रॉपडाउन लिंक जोड़ने के लिए कंटेनर तत्व (जैसे <div class="dropdown-content">) का उपयोग करें।
सीएसएस के साथ ड्रॉपडाउन मेनू को सही स्थिति में लाने के लिए बटन और कंटेनर तत्व (<div class="dropdown-content"> के चारों ओर एक <div class="dropdown"> तत्व लपेटें।
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* 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;
}
उदाहरण समझाया गया
हमने नेविगेशन बार और नेवबार लिंक को बैकग्राउंड-कलर, पैडिंग आदि के साथ स्टाइल किया है।
हमने ड्रॉपडाउन बटन को पृष्ठभूमि-रंग, पैडिंग इत्यादि के साथ स्टाइल किया है।
.dropdown-contentकक्षा वास्तविक ड्रॉपडाउन मेनू रखती है । यह डिफ़ॉल्ट रूप से छिपा होता है, और होवर पर प्रदर्शित किया जाएगा (नीचे देखें)। यह ड्रॉपडाउन बटन के ठीक नीचे दिखाई देने के लिए स्थित है, और पूरी स्क्रीन को कवर करने के लिए चौड़ाई 100% पर सेट है।
बॉर्डर का उपयोग करने के बजाय, हमने box-shadowड्रॉपडाउन मेनू को "कार्ड" जैसा बनाने के लिए प्रॉपर्टी का उपयोग किया है। हम ड्रॉपडाउन को अन्य तत्वों के सामने रखने के लिए z-index का भी उपयोग करते हैं।
:hoverजब उपयोगकर्ता माउस को ड्रॉपडाउन बटन पर ले जाता है तो ड्रॉपडाउन मेनू दिखाने के लिए चयनकर्ता का उपयोग किया जाता है ।
कक्षाओं का .columnउपयोग तीन कॉलम बनाने के लिए किया जाता है जो ड्रॉपडाउन मेनू के अंदर एक दूसरे के बगल में तैरते हैं (विभिन्न श्रेणियों को दिखाने के लिए)।
उत्तरदायी मेगा मेनू
उदाहरण
/* 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;
}
}
युक्ति: ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे सीएसएस ड्रॉपडाउन ट्यूटोरियल पर जाएं।
युक्ति: क्लिक करने योग्य ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे क्लिक करने योग्य ड्रॉपडाउन पर जाएं
युक्ति: नेवबार के बारे में अधिक जानने के लिए हमारे CSS नेवबार ट्यूटोरियल पर जाएँ।
युक्ति: रिस्पॉन्सिव नेवबार बनाने के तरीके के बारे में जानने के लिए हमारे रिस्पॉन्सिव टॉप नेविगेशन पर जाएं।