सीएसएस नेविगेशन बार
डेमो: नेविगेशन बार्स
खड़ा
नेविगेशन बार्स
उपयोग में आसान नेविगेशन किसी भी वेब साइट के लिए महत्वपूर्ण है।
CSS से आप उबाऊ HTML मेनू को अच्छे दिखने वाले नेविगेशन बार में बदल सकते हैं।
नेविगेशन बार = लिंक की सूची
एक नेविगेशन बार को आधार के रूप में मानक HTML की आवश्यकता होती है।
हमारे उदाहरणों में हम एक मानक HTML सूची से नेविगेशन बार का निर्माण करेंगे।
एक नेविगेशन बार मूल रूप से लिंक की एक सूची है, इसलिए <ul> और <li> तत्वों का उपयोग करना सही समझ में आता है:
उदाहरण
<ul>
<li><a href="default.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;
ऊपर दिए गए उदाहरण में कोड लंबवत और क्षैतिज नेविगेशन बार दोनों में उपयोग किया जाने वाला मानक कोड है, जिसके बारे में आप अगले अध्यायों में जानेंगे।