सीएसएस क्षैतिज नेविगेशन बार
क्षैतिज नेविगेशन बार
क्षैतिज नेविगेशन बार बनाने के दो तरीके हैं। इनलाइन या फ़्लोटिंग सूची आइटम का उपयोग करना ।
इनलाइन सूची आइटम
क्षैतिज नेविगेशन बार बनाने का एक तरीका पिछले पृष्ठ से "मानक" कोड के अलावा <li> तत्वों को इनलाइन के रूप में निर्दिष्ट करना है:
उदाहरण
li
{
display: inline;
}
उदाहरण समझाया:
display: inline;- डिफ़ॉल्ट रूप से, <li> तत्व ब्लॉक तत्व हैं। यहां, हम प्रत्येक सूची आइटम से पहले और बाद में लाइन ब्रेक को हटाते हैं, उन्हें एक लाइन पर प्रदर्शित करने के लिए
फ़्लोटिंग सूची आइटम
क्षैतिज नेविगेशन बार बनाने का एक और तरीका है <li> तत्वों को फ़्लोट करना, और नेविगेशन लिंक के लिए एक लेआउट निर्दिष्ट करना:
उदाहरण
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
उदाहरण समझाया:
float: left;- ब्लॉक तत्वों को एक दूसरे के बगल में तैरने के लिए फ्लोट का उपयोग करेंdisplay: block;- हमें पैडिंग निर्दिष्ट करने की अनुमति देता है (और यदि आप चाहें तो ऊंचाई, चौड़ाई, मार्जिन इत्यादि)padding: 8px;- प्रत्येक <a> तत्व के बीच कुछ पैडिंग निर्दिष्ट करें, ताकि वे अच्छे दिखेंbackground-color: #dddddd;- प्रत्येक <a> तत्व में एक धूसर पृष्ठभूमि-रंग जोड़ें
युक्ति: यदि आप एक पूर्ण-चौड़ाई वाला पृष्ठभूमि रंग चाहते हैं, तो प्रत्येक <a> तत्व के बजाय <ul> में पृष्ठभूमि-रंग जोड़ें:
उदाहरण
ul
{
background-color: #dddddd;
}
क्षैतिज नेविगेशन बार उदाहरण
गहरे रंग की पृष्ठभूमि के साथ एक बुनियादी क्षैतिज नेविगेशन बार बनाएं और जब उपयोगकर्ता उनके ऊपर माउस ले जाए तो लिंक की पृष्ठभूमि का रंग बदल दें:
उदाहरण
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
सक्रिय/वर्तमान नेविगेशन लिंक
उपयोगकर्ता को यह बताने के लिए वर्तमान लिंक में एक "सक्रिय" वर्ग जोड़ें कि वह किस पृष्ठ पर है:
उदाहरण
.active {
background-color: #04AA6D;
}
राइट-अलाइन लिंक
सूची आइटम्स को दाईं ओर ( ) फ़्लोट करके लिंक को राइट-एलाइन करें float:right;:
उदाहरण
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
सीमा विभाजक
border-rightलिंक डिवाइडर बनाने के लिए <li> में प्रॉपर्टी जोड़ें :
उदाहरण
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
फिक्स्ड नेविगेशन बार
उपयोगकर्ता द्वारा पृष्ठ को स्क्रॉल करने पर भी नेविगेशन बार को पृष्ठ के शीर्ष या निचले भाग पर बने रहने दें:
फिक्स्ड टॉप
ul {
position: fixed;
top: 0;
width: 100%;
}
फिक्स्ड बॉटम
ul {
position: fixed;
bottom: 0;
width: 100%;
}
नोट: निश्चित स्थिति मोबाइल उपकरणों पर ठीक से काम नहीं कर सकती है।
धूसर क्षैतिज नवबार
पतली धूसर बॉर्डर वाली धूसर क्षैतिज नेविगेशन बार का एक उदाहरण:
उदाहरण
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
चिपचिपा नवबार
position: sticky;चिपचिपा नावबार बनाने के लिए <ul> में जोड़ें ।
स्क्रॉल स्थिति के आधार पर एक चिपचिपा तत्व सापेक्ष और निश्चित के बीच टॉगल करता है। व्यूपोर्ट में दी गई ऑफ़सेट स्थिति मिलने तक इसे सापेक्ष स्थिति में रखा जाता है - फिर यह जगह पर "चिपक जाता है" (जैसे स्थिति: निश्चित)।
उदाहरण
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
नोट: इंटरनेट एक्सप्लोरर स्टिकी पोजिशनिंग का समर्थन नहीं करता है। सफारी को एक -webkit- उपसर्ग की आवश्यकता होती है (ऊपर उदाहरण देखें)। आपको काम करने के लिए कम से कम एक , या स्टिकी पोजिशनिंग के लिए भी topनिर्दिष्ट करना होगा right।bottomleft
और ज्यादा उदाहरण
उत्तरदायी टोपनाव
प्रतिक्रियाशील शीर्ष नेविगेशन बनाने के लिए CSS मीडिया क्वेरी का उपयोग कैसे करें।
उत्तरदायी सिडेनाव
प्रतिक्रियाशील पक्ष नेविगेशन बनाने के लिए CSS मीडिया क्वेरी का उपयोग कैसे करें।
ड्रॉपडाउन नवबार
नेविगेशन बार के अंदर ड्रॉपडाउन मेनू कैसे जोड़ें।
कभी W3Schools Spaces के बारे में सुना है ? यहां आप शुरुआत से अपनी वेबसाइट बना सकते हैं या एक टेम्पलेट का उपयोग कर सकते हैं, और इसे मुफ्त में होस्ट कर सकते हैं।
मुफ़्त में शुरू करें* किसी क्रेडिट कार्ड की आवश्यकता नहीं