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