सीएसएस होरिज़ोंटल नेविगेशन बार
- पिछला पृष्ठ सीएसएस वर्टिकल नेविगेशन बार
- अगला पृष्ठ सीएसएस ड्रॉपडाउन मेनू
स्तरीय होगट नेविगेशन बार
स्तरीय होगट नेविगेशन बार को बनाने के दो तरीके हैं: इस्तेमाल करेंइनलाइनयाफ्लॉटसूची आयाम
इनलाइन सूची आयाम
स्तरीय होगट नेविगेशन बार का निर्माण करने का एक तरीका, पिछले चापरे में 'स्टैंडर्ड' कोड के अलावा, <li> एलीमेंट को inline निर्धारित करना है:
उदाहरण
li {
display: inline;
}
उदाहरण व्याख्या:
display: inline; - डिफ़ॉल्ट में, <li> एलीमेंट ब्लॉक एलीमेंट है. यहाँ, हम प्रत्येक सूची आयाम के पहले और बाद में बदले को हटा देते हैं, ताकि वे एक पंक्ति में दिखाए जाएं
फ्लॉट सूची आयाम
स्तरीय होगट नेविगेशन बार बनाने का एक और तरीका <li> एलीमेंट को फ्लॉट करना और नेविगेशन लिंक के लिए डिजाइन निर्धारित करना है:
उदाहरण
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
उदाहरण व्याख्या:
float: left;- float का उपयोग करके ब्लॉक एलीमेंट को एक दूसरे के साथ पड़े तरीके से स्लाइड करेंdisplay: block;- लिंक को ब्लॉक एलीमेंट के रूप में दिखाने से पूरे लिंक क्षेत्र को क्लिक किया जा सकता है (केवल टेक्स्ट नहीं), और हमें फ़िल्टर (आवश्यकता पड़े तो ऊंचाई, चौड़ाई, मार्ग, आदि) निर्धारित करने की अनुमति होती हैpadding: 8px;- ब्लॉक एलीमेंट को सुसज्जित करेंbackground-color: #dddddd;- प्रत्येक एलीमेंट को ग्रे पृष्ठभूमि रंग दें
सूचना:पूर्ण चौड़ाई वाला पृष्ठभूमि रंग चाहें तो <ul> में बगर प्रत्येक <a> एलीमेंट में background-color जोड़ें:
उदाहरण
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;
}
/* माउस ऑवर के दौरान लिंक रंग को #111 (श्वेत) में बदलें */
li a:hover {
background-color: #111;
}
सक्रिय/वर्तमान नेविगेशन लिंक
वर्तमान लिंक को 'active' वर्ग जोड़ें, ताकि उपयोगकर्ता जान सके कि वह किस पृष्ठ पर है:
उदाहरण
.active {
background-color: #4CAF50;
}
दायाँ बाजू में जमा करने वाले लिंक
सूची आइटम को दायाँ तरफ फ्लोट करके लिंक को दायाँ बाजू में जमा करने के लिए:float:right;）：
उदाहरण
<ul> <li><a href="#home">होम</a></li> <li><a href="#news">समाचार</a></li> <li><a href="#contact">संपर्क</a></li> <li style="float:right"><a class="active" href="#about">बारे में</a></li> </ul>
सेपरेटर
बोर्डर border-right प्रविधि को <li> में जोड़ें, जिससे लिंक विभाजक बने:
उदाहरण
/* सभी सूची आइटम के लिए ग्रे बाहरी फास्ट बोर्डर जोड़ें, अंतिम आइटम (last-child) को छोड़ें */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
फास्ट नेविगेशन बार
नेविगेशन बार को पृष्ठ के ऊपर और नीचे रखने के लिए, भले ही उपयोगकर्ता पृष्ठ को गलती करता है:
ध्यान दें:मोबाइल उपकरणों पर फास्ट स्थानांतरण सही ढंग से काम नहीं कर सकता है。
स्तरीय नेविगेशन बार
फीके रंग की बाहरी फास्ट रंग की स्तरीय नेविगेशन बार का उदाहरण
उदाहरण
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
स्टिकी नेविगेशन बार
को जोड़ें पोजिशन: sticky;स्टिकी नेविगेशन बार के लिए बनाता है।
स्टिकी एलिमेंट गलियारे की स्थिति के अनुसार आपसी और फास्ट के बीच टॉगल होता है। यह आपसी स्थानांतरण का है, जब तक यह दृश्य में दिये गए एक्सीज़ की स्थिति तक नहीं पहुँचता है - फिर इसे उचित स्थान पर 'स्टिकी' कर देता है (उदाहरणतः position:fixed).
उदाहरण
ul {
पोजिशन: -webkit-sticky; /* सफारी */
पोजिशन: sticky;
टॉप: 0;
}
ध्यान दें:इंटरनेट एक्सप्लोरर、एज 15 और अधिक पुरानी संस्करण एक्सपोंज़ीव पोजिशन का समर्थन नहीं करते।सफारी को -webkit- प्रीफिक्स की आवश्यकता है (ऊपरी उदाहरण को देखें)।आपको यह भी निर्दिष्ट करना होगा टॉप、राइट、बॉटम या लेफ्ट कम से कम एक, ताकि स्टिकी पोजिशन काम करे。
और अधिक इंस्टेंस
- रिस्पोंसिव टॉप नेविगेशन बार
- CSS मीडिया क्वेरी का उपयोग करके रिस्पोंसिव टॉप नेविगेशन बार बनाने के लिए कैसा करें。
- रिस्पोंसिव साइड नेविगेशन बार
- CSS मीडिया क्वेरी का उपयोग करके रिस्पोंसिव साइड नेविगेशन बार बनाने के लिए कैसा करें。
- ड्रॉपडाउन नेविगेशन बार
- नेविगेशन बार में ड्रॉपडाउन मेनू जोड़ने के लिए कैसा करें。
- पिछला पृष्ठ सीएसएस वर्टिकल नेविगेशन बार
- अगला पृष्ठ सीएसएस ड्रॉपडाउन मेनू
