हिंदी में नेविगेशन बार बनना सीखे
नेविगेशन बार
आज हम नेविगेशन के बारे में बात करेंगे इसे किस तरह बनाया जा सकता है
नेविगेशन बार = लिंक की सूची
नेविगेशन बार को आधार के रूप में मानक HTML की आवश्यकता होती है।
हमारे उदाहरणों में हम मानक HTML सूची से नेविगेशन बार का निर्माण करेंगे।
नेविगेशन बार मूल रूप से लिंक की एक सूची है, इसलिए <ul> और <li तत्वों का उपयोग करना सही है:
HTML Code
<pre class="html"><code>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
</code></pre>
Output
अब हम सूची से बुलेट्स, मार्जिन और पैडिंग कैसे हटा है :
<pre class="html"><code>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
</code></pre>
CSS Code
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Output
वर्टिकल नेविगेशन बार बनाने के लिए, आप पिछले पेज के कोड के अलावा, सूची के अंदर <a> तत्वों को स्टाइल कर सकते हैं:
<pre class="html"><code>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #ddd058;
}
</style>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
</code></pre>
CSS Code
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #ddd058;
}
Output
कलर बैकग्राउंड रंग के साथ एक बुनियादी वर्टीकल नेविगेशन बार बनाएं गए और जब यूजर उन पर माउस ले जाएगा तो लिंक का बैकग्राउंड रंग बदलेंगा :
<pre class="html"><code>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
</code></pre>
CSS Code
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;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Output
