सीएसएस वर्टिकल नेविगेशन बार

कोर्स सिफारिश:

खंडीय नेविगेशन बार

इंस्टांस

width: 200px;
  li a {
  आप यहां <ul> की चौड़ाई भी सेट कर सकते हैं, और <a> की चौड़ाई हटा सकते हैं क्योंकि जब इन्हें ब्लॉक एलिमेंट के रूप में दिखाया जाता है, तो वे सभी उपलब्ध चौड़ाई को ले लेते हैं। यह पहले के उदाहरण के समान परिणाम देता है:
}

खुद ही प्रयास करें

यदि आप खंडीय नेविगेशन बार बनाना चाहते हैं, तो पिछले अध्याय के कोड के अलावा, सूची में <a> एलिमेंट के शैली को भी सेट कर सकते हैं:

  • li a { उदाहरण व्याख्या:
  • आप यहां <ul> की चौड़ाई भी सेट कर सकते हैं, और <a> की चौड़ाई हटा सकते हैं क्योंकि जब इन्हें ब्लॉक एलिमेंट के रूप में दिखाया जाता है, तो वे सभी उपलब्ध चौड़ाई को ले लेते हैं। यह पहले के उदाहरण के समान परिणाम देता है: - लिंक को ब्लॉक एलिमेंट के रूप में दिखाने से पूरे लिंक क्षेत्र को क्लिक किया जा सकता है (केवल लिखित टेक्स्ट नहीं), हम यहां चौड़ाई भी निर्दिष्ट कर सकते हैं (अगर आवश्यक हो, तो आंतरिक बैडर, बाह्य बैडर, ऊंचाई आदि को भी)।

- डिफ़ॉल्ट में, ब्लॉक एलिमेंट पूरी उपलब्ध चौड़ाई को ले लेते हैं। हमें 60 पिक्सल की चौड़ाई निर्दिष्ट करनी होगी।

इंस्टांस

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  आप यहां <ul> की चौड़ाई भी सेट कर सकते हैं, और <a> की चौड़ाई हटा सकते हैं क्योंकि जब इन्हें ब्लॉक एलिमेंट के रूप में दिखाया जाता है, तो वे सभी उपलब्ध चौड़ाई को ले लेते हैं। यह पहले के उदाहरण के समान परिणाम देता है:
} 
width: 200px;
  li a {
}

खुद ही प्रयास करें

width: 60px;

खंडीय नेविगेशन बार उदाहरण

इंस्टांस

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  ग्रे रंग के पृष्ठभूमि रंग के साथ आधारभूत खंडीय नेविगेशन बार बनाएं और जब उपयोगकर्ता लिंक पर माउस ले जाए तो लिंक के पृष्ठभूमि रंग को बदलें:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* माउस हॉवर पर लिंक रंग बदलना */
  li a:hover {
  background-color: #4CAF50;
}

खुद ही प्रयास करें

background-color: #555;

सक्रिय/वर्तमान नेविगेशन लिंक

इंस्टांस

वर्तमान लिंक को "active" वर्ग जोड़कर, ताकि उपयोगकर्ता जान सके कि वह किस पृष्ठ पर है:
  .active {
  background-color: #4CAF50;
}

खुद ही प्रयास करें

color: white;

केंद्रित लिंक और बॉर्डर जोड़ें text-align:center जोड़कर <li> या <a> में लिंक को केंद्रित करें。

जोड़ें border गुण को <ul> में जोड़ें, नेविगेशन बार के चारों ओर बॉर्डर जोड़ें। अगर आप नेविगेशन बार के अंदर भी बॉर्डर जोड़ना चाहते हैं, तो सभी <li> तत्व के लिए border-bottomसबसे अंतिम तत्व को छोड़कर:

इंस्टांस

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {}}
  border-bottom: none;
}

खुद ही प्रयास करें

पूर्ण ऊंचाई वाला फिक्स्ड विक्टरिकल नेविगेशन बार

पूर्ण ऊंचाई वाला 'स्टिकी' बायां नेविगेशन बनाएं:

इंस्टांस

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* पूर्ण ऊंचाई */
  position: fixed; /* इसे चिकना बनाए रखे, भले ही स्क्रॉल के दौरान */
  overflow: auto; /* अगर साइडबार की सामग्री बहुत है, तो स्क्रॉल बार सक्षम करें */
}

खुद ही प्रयास करें

ध्यान:यह इंस्टांस मोबाइल उपकरण पर सही ढंग से काम नहीं कर सकता है。