HTML और CSS का उपयोग करके एक उत्तरदायी नेविगेशन बार कैसे बनाएं

आपके उपयोगकर्ता अनुभव और वेब डिज़ाइन कौशल को बेहतर बनाने के लिए एक प्रतिक्रियाशील नेविगेशन बार का निर्माण एक अनिवार्य हिस्सा है। इस लेख में, हम आपको दिखाएंगे कि कैसे केवल HTML और CSS (जावास्क्रिप्ट की एक भी पंक्ति नहीं!) का उपयोग करके एक प्रतिक्रियाशील नेविगेशन बार बनाया जाए।

इसलिए, यदि आप एक नौसिखिया हैं जो फ्रंट-एंड डेवलपमेंट सीख रहे हैं और नेविगेशन बार बनाना चाहते हैं, तो आप सही जगह पर आए हैं। लेकिन, इससे पहले कि हम गहराई में जाएं, आइए पहले एक प्रतिक्रियाशील नेविगेशन बार के मूल डिजाइन सिद्धांतों को समझें।

पूर्वापेक्षाएँ: एक नवबार के तीन प्रमुख तत्व

यह बिल्कुल स्पष्ट है कि अधिकांश वेबसाइट स्वामी नए विज़िटर प्राप्त करना चाहते हैं। ऐसा करने की दिशा में पहला कदम आगंतुकों को एक स्पष्ट और संक्षिप्त रास्ता दिखा रहा है। आप एक नावबार बनाने वाले हैं जो जिज्ञासा को प्रेरित करता है और आगंतुकों को एक साथ आकर्षित करता है। एक आदर्श नावबार डिजाइन करते समय आपके पास तीन प्रमुख तत्व होने चाहिए:

सरल

यह स्पष्ट और पढ़ने में आसान होना चाहिए। प्रत्येक पृष्ठ के लिंक के साथ नेवबार को अव्यवस्थित करने के बजाय, आपको अपनी साइट की व्यापक श्रेणियों के लिए जाना चाहिए। बाद में, यदि आवश्यक हो तो आप ड्रॉपडाउन के रूप में उप-मेनू जोड़ सकते हैं।

ध्यान देने योग्य

एक साधारण नावबार बिल्कुल भी उबाऊ नहीं होना चाहिए। डिज़ाइन को अधिक सुसंगत बनाने के लिए आपको पूर्व-निर्धारित ब्रांड रंग से चिपके रहना चाहिए। आप कई रंग योजनाओं के साथ प्रयोग कर सकते हैं और हाइलाइटिंग और ड्रॉपडाउन मेनू के लिए हल्के या गहरे रंगों का उपयोग कर सकते हैं।

उत्तरदायी

स्टेटिस्टा की एक वैश्विक इंटरनेट उपयोग रिपोर्ट से पता चलता है कि वैश्विक आबादी का 59.5 प्रतिशत सक्रिय रूप से इंटरनेट का उपयोग कर रहा है, और 92.6 प्रतिशत मोबाइल उपकरणों के माध्यम से इसका उपयोग कर रहे हैं। यह आपकी साइट पर प्रतिक्रियाशील मोबाइल नेविगेशन को लागू करने के महत्व को समझने के लिए पर्याप्त से अधिक है।

शीर्ष-स्तरीय मोबाइल नेविगेशन काफी लोकप्रिय है। आप हैमबर्गर मेनू, गिलोटिन, फ्लोटिंग आइकन और टैब का उपयोग कर सकते हैं। यह एक तारणहार है जब आपके पास कई पदानुक्रमों के साथ पांच या अधिक श्रेणियां हैं। शीर्ष-स्तरीय नेविगेशन महत्वपूर्ण स्क्रीन स्थान को बचा सकता है, खासकर जब आपके पास सामग्री-भारी साइट हो।

प्रासंगिक आइकन वाले टैब बार निचले नेविगेशन बार के लिए एकदम उपयुक्त हैं क्योंकि उनमें आमतौर पर पदानुक्रम के समान स्तर पर तीन से पांच मेनू होते हैं। सबमेनस और अनुक्रमिक मेनू माता-पिता-बच्चे के संबंध के साथ मुख्य श्रेणी का अनुसरण करते हैं।

हैमबर्गर मेनू के साथ एक उत्तरदायी नेविगेशन बार का निर्माण

अब जबकि डिजाइन सिद्धांत आपके दिमाग में एकदम स्पष्ट हैं, तो चलिए मेनू बनाना शुरू करते हैं। हम शुरू से ही CSS Flexbox और Media queries का उपयोग करके एक प्रतिक्रियाशील नेवबार बनाने जा रहे हैं।

तो, हमारा नावबार कैसा दिखेगा? इसके साथ शीर्ष-स्तरीय नेविगेशन होगा:

  • प्रतीक चिन्ह
  • नेविगेशन मेनू
  • ड्रॉप डाउन मेनू
  • हैमबर्गर मेनू (चेकबॉक्स हैक का उपयोग करके)

HTML के साथ शुरुआत करना

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">&#9776;</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>

हमारे पास सेवा (मुख्य) मेनू के अंदर ड्रॉपडाउन मेनू होगा। डेस्कटॉप नेवबार बनाते समय हम हैमबर्गर मेनू को छोड़ सकते हैं। आखिरकार, हमने अभी तक चेकबॉक्स वर्कफ़्लो पर चर्चा नहीं की है।

आउटपुट :

बेसिक सीएसएस लागू करना: उपयोगिताएँ

 /* UTILITIES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}

आगे बढ़ते हुए, आइए अपने नावबार को स्टाइल करें।

CSS Flexbox का उपयोग करके नेवबार को स्टाइल करना

हम CSS Flexbox का उपयोग करेंगे और हाइलाइटिंग के लिए होवर प्रभाव लागू करेंगे। सेवा मेनू को थोड़ा अतिरिक्त ध्यान देने की आवश्यकता है क्योंकि आपको डिस्प्ले सेट करना होगा : कोई नहीं; सामान्य परिस्थितियों के लिए और इसे प्रदर्शित करने के लिए सेट करें : ब्लॉक; जब कोई उस पर मंडराता है।

 /* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}

आउटपुट :

सीएसएस मीडिया प्रश्नों का उपयोग कर उत्तरदायी नेवबार

जैसा कि चर्चा की गई है, हमारे पास एक हैमबर्गर मेनू होगा जो केवल छोटे स्क्रीन आकार वाले मोबाइल उपकरणों पर दिखाई देगा। इसके लिए हमारे पास <ul class="nav-links"> के दो बच्चे होंगे। सबसे पहले, हम इनपुट प्रकार = "चेकबॉक्स" का उपयोग करेंगे और लेबल को एक वर्ग = "हैमबर्गर" देंगे। दूसरा, हम अपना नेविगेशन मेनू क्लास = "मेनू" देंगे।

ध्यान दें कि &#9776; एक HTML इकाई है कि प्रदर्शित करता है (हैमबर्गर आइकन।) है

 <body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">&#9776;</label>
<!-- NAVIGATION MENUS -->
<div class=”menu”>...</div>
</ul>
</nav>
</body>

चेकबॉक्स तत्व का उपयोग करने के पीछे तर्क यह है कि जब इसे अनचेक किया जाता है तो इसमें डिस्प्ले होगा: कोई नहीं; जबकि चेक करते समय यह सामान्य भाई चयनकर्ता (~) की सीएसएस संपत्ति को डिस्प्ले: ब्लॉक पर सेट करके बदल देगा; सीधे शब्दों में कहें तो, हम हैमबर्गर को टॉगल करने के लिए चेकबॉक्स का उपयोग कर रहे हैं और विस्तारित और छिपी हुई अवस्थाओं के बीच नेविगेशन मेनू का उपयोग कर रहे हैं।

नीचे दिखाए गए अनुसार CSS मीडिया क्वेरी का उपयोग करके मोबाइल उपकरणों के लिए नेवबार को स्टाइल करें। इस मामले में, आप मोबाइल मेनू के लिए CSS ग्रिड और JS का भी उपयोग कर सकते हैं।

 /*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}

यहाँ हमने क्या बनाया है:

डेस्कटॉप

मोबाइल उपकरणों

अपने आदर्श नेविगेशन बार को डिजाइन करने का सबसे अच्छा तरीका प्रयोग करना है

अच्छा वेबसाइट नेविगेशन होने से बाउंस दरों और रूपांतरण दरों पर भारी प्रभाव पड़ता है। अनिवार्य रूप से, आपकी वेबसाइट की पहली तह में एक स्पष्ट संदर्भ, पदानुक्रमित नेविगेशन और कॉल-टू-एक्शन होना चाहिए। आपकी वेबसाइट नेविगेशन संरचना से विज़िटर को आपकी साइट के लोकप्रिय या ट्रेंडिंग पेजों पर तीन क्लिक या उससे कम समय में पहुंचने में मदद मिलेगी। इसलिए, बेहतर साइट नेविगेशन का प्रयोग और डिजाइन करते रहें!