सीएसएस नेविगेशन बार

डिमो: नेविगेशन बार

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

स्तरीय नेविगेशन बार


नेविगेशन बार

सहज नेविगेशन किसी भी वेबसाइट के लिए अहम है。

CSS के उपयोग से, आप बहुत साधारण HTML मेनू को सुंदर नेविगेशन बार में बदल सकते हैं。

नेविगेशन बार = लिंक सूची

नेविगेशन बार को मानक HTML की आधार रचना की जरूरत है。

हमारे उदाहरण में, हम नेविगेशन बार को मानक HTML सूची से बनाएंगे。

नेविगेशन बार अधिकतर लिंक सूची है, इसलिए <ul> और <li> एलीमेंट का उपयोग करना महत्वपूर्ण है:

इंस्टेंस

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

खुद आज्ञा करें

अब, सूची से आइटम सूची, बाहरी और भीतरी घात (पैडिंग) को मिटाएं:

इंस्टेंस

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

खुद आज्ञा करें

उदाहरण व्याख्या:

  • list-style-type: none; - आइटम सूची को मिटाएं।नेविगेशन टैब लिस्ट आइटम मार्कर्स की आवश्यकता नहीं है।
  • सेट करें margin: 0; और padding: 0; ब्राउज़र के डिफॉल्ट सेटिंग को मिटाएं。

ऊपरी उदाहरण में कोड, विकल्पीय और आड़ा नेविगेशन बार में इस्तेमाल किए गए मानक कोड है, आपको अगले चाप में अधिक जानकारी मिलेगी。