HTML CSS में Navigation Bar बनाना सीखें | हिंदी Guideा
Mahek Institute Rewa द्वारा स्टेप-बाय-स्टेप गाइड
नेविगेशन बार क्या है?
नेविगेशन बार वेबसाइट पर लिंक्स की एक सूची होती है, जो उपयोगकर्ताओं को विभिन्न पेजों तक आसानी से पहुंचने में मदद करती है। इसे HTML और CSS का उपयोग करके बनाया जा सकता है।
हम इस ट्यूटोरियल में एक वर्टिकल नेविगेशन बार बनाएंगे, जिसमें लिंक्स की सूची होगी।
बेसिक HTML नेविगेशन बार
नेविगेशन बार बनाने के लिए हम HTML की <ul> और <li> टैग्स का उपयोग करेंगे। नीचे बेसिक HTML कोड है:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>नेविगेशन बार</title>
</head>
<body>
<ul>
<li><a href="#">होम</a></li>
<li><a href="#">न्यूज़</a></li>
<li><a href="#">संपर्क</a></li>
<li><a href="#">हमारे बारे में</a></li>
</ul>
</body>
</html>
आउटपुट
बुलेट्स, मार्जिन और पैडिंग हटाना
डिफ़ॉल्ट बुलेट्स, मार्जिन और पैडिंग को हटाने के लिए CSS का उपयोग करें:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>नेविगेशन बार</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#">होम</a></li>
<li><a href="#">न्यूज़</a></li>
<li><a href="#">संपर्क</a></li>
<li><a href="#">हमारे बारे में</a></li>
</ul>
</body>
</html>
CSS कोड
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
आउटपुट
वर्टिकल नेविगेशन बार स्टाइल करना
लिंक्स को ब्लॉक एलिमेंट्स के रूप में स्टाइल करने और बैकग्राउंड रंग जोड़ने के लिए CSS का उपयोग करें:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>वर्टिकल नेविगेशन बार</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #ddd058;
}
</style>
</head>
<body>
<ul>
<li><a href="#">होम</a></li>
<li><a href="#">न्यूज़</a></li>
<li><a href="#">संपर्क</a></li>
<li><a href="#">हमारे बारे में</a></li>
</ul>
</body>
</html>
CSS कोड
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #ddd058;
}
आउटपुट
होवर इफेक्ट के साथ वर्टिकल नेविगेशन बार
होवर इफेक्ट जोड़ने के लिए CSS में :hover का उपयोग करें, ताकि माउस ले जाने पर लिंक का रंग बदले:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>वर्टिकल नेविगेशन बार होवर इफेक्ट</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">होम</a></li>
<li><a href="#">न्यूज़</a></li>
<li><a href="#">संपर्क</a></li>
<li><a href="#">हमारे बारे में</a></li>
</ul>
</body>
</html>
CSS कोड
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
आउटपुट
