Creating a Navigation Menu Free web designing Course Tutorials #23
Creating a Navigation Menu
हमने सीएसएस में अब तक सीमाओं को समायोजित करने से लेकर लिंक को स्टाइल करने तक विभिन्न बातों पर चर्चा की है। यहां, हम यह देखने जा रहे हैं कि वेबसाइट में नेविगेशन बार क्या हैं और उन्हें कैसे लागू किया जाए।
हम tut23.html नामक एक नई फ़ाइल बनाकर शुरू करेंगे और मूल HTML कोड प्राप्त करने के लिए बॉयलरप्लेट जोड़ेंगे। शीर्षक अनुभाग के अंतर्गत <शीर्षक> टैग में नेविगेशन के रूप में शीर्षक दें।
एक नेविगेशन बार आमतौर पर लिंक की एक सूची है, इसलिए <ul> और <li> तत्वों का उपयोग करके इसे प्राप्त करने में मदद मिल सकती है। निम्नलिखित के लिए कोड इस प्रकार होगा-
<header>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
</header>
अब हम नेवबार वर्ग को लक्षित करेंगे और इसे और अधिक आकर्षक दिखाने के लिए कुछ CSS लागू करेंगे।
सबसे पहले हम नेविगेशन बार का रंग बदलेंगे और उसके सिरों को गोलाकार बनाएंगे।
.navbar{
background-color: black;
border-radius: 30px;
}
अगले चरण में, हम सभी एनएवी तत्वों को एक ही क्षैतिज रेखा में लाएंगे
.navbar li{
float:left;
list-style: none;
margin: 13px 20px;
}
नेविगेशन आइटम में सभी बुलेटेड बिंदुओं को हटाने के लिए सूची-शैली की संपत्ति का उपयोग किया जाता है।
उपरोक्त कोड लिखने के बाद, पृष्ठभूमि हटा दी जाती है क्योंकि इसे मूल तत्व द्वारा ओवरफ्लो किया गया है। इससे बचने के लिए हमें लिखना होगा-
.navbar ul{
overflow: auto;
}
अब हम नेवबार में मौजूद सभी तत्वों में पैडिंग जोड़ेंगे-
.navbar li a{
padding: 3px 3px;
text-decoration: none;
color: white;
}
हम नेविगेशन मेनू में सर्च बार भी जोड़ सकते हैं। इसके लिए हमें लिखना होगा-
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
यह नेविगेशन मेनू में एक खोज बार बनाएगा। हम खोज टैग को शैलीबद्ध कर सकते हैं-
.search{
float: right;
color: white;
padding: 12px 75px;
}
हम नेविगेशन बार में उपलब्ध मेनू को इस प्रकार स्टाइल कर सकते हैं-
.navbar input{
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
'नेवबार' के भीतर, इनपुट टैग को स्टाइल करने के लिए हम ऊपर दिखाए गए अनुसार बॉर्डर, बॉर्डर-त्रिज्या, पैडिंग और चौड़ाई शामिल कर सकते हैं। हम आपकी आवश्यकताओं के अनुसार वेब पेज पर निरीक्षण तत्व का उपयोग करके पैडिंग और अन्य गुणों को भी समायोजित कर सकते हैं।
हम सभी ली में होवर प्रभाव भी जोड़ सकते हैं। इसका मतलब है कि जब भी हम उन तत्वों पर पॉइंटर लगाते हैं तो उसे अपना रंग बदलना चाहिए।
.navbar li a:hover{
color: red
}
हमने रंग को लाल पर सेट कर दिया है और अब जब आप 'होम', 'अबाउट', 'सर्विसेज', 'कॉन्टैक्ट-अस' पर होवर करते हैं, तो यह अपना रंग बदलकर लाल कर देगा। आप तत्वों को समायोजित करने के लिए 'पैडिंग-टॉप' भी जोड़ सकते हैं।
मुझे उम्मीद है कि आप समझ गए होंगे कि वेबसाइट में नेविगेशन बार कैसे जोड़ें और इसे अपने अनुसार कैसे बनाएं। अधिक जानने के लिए ट्यूटोरियल के साथ बने रहें और अब तक सिखाई गई बातों का अभ्यास करते रहें।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navigation</title>
<style>
.navbar{
background-color: black;
border-radius: 30px;
}
.navbar ul{
overflow: auto;
}
.navbar li{
float:left;
list-style: none;
margin: 13px 20px;
}
.navbar li a{
padding: 3px 3px;
text-decoration: none;
color: white;
}
.navbar li a:hover{
color: red
}
.search{
float: right;
color: white;
padding: 12px 75px;
}
.navbar input{
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
</header>
</body>
</html>
