प्रतिसादात्मक नेव्हिगेशन बार तयार करणे हा तुमचा वापरकर्ता अनुभव आणि वेब डिझाइन कौशल्ये सुधारण्याचा एक आवश्यक भाग आहे. या लेखात, आम्ही तुम्हाला फक्त HTML आणि CSS (JavaScript ची एक ओळ नाही!) वापरून प्रतिसादात्मक नेव्हिगेशन बार कसा तयार करायचा ते दाखवू.
तर, जर तुम्ही नवशिक्या शिकत फ्रंट-एंड डेव्हलपमेंट करत असाल आणि तुम्हाला नेव्हिगेशन बार तयार करायचा असेल, तर तुम्ही योग्य ठिकाणी आला आहात. परंतु, HTML आणि CSS सह नेव्हिगेशन बार कसा बनवायचा हे आम्ही तुम्हाला दाखवण्यापूर्वी, प्रथम प्रतिसादात्मक नेव्हिगेशन बारची मूलभूत डिझाइन तत्त्वे समजून घेऊ.
पूर्वतयारी: नवबारचे तीन प्रमुख घटक
हे अगदी स्पष्ट आहे की बहुतेक वेबसाइट मालकांना नवीन अभ्यागत मिळवायचे आहेत. हे करण्याच्या दिशेने पहिले पाऊल म्हणजे अभ्यागतांना स्पष्ट आणि संक्षिप्त मार्ग दाखवणे. तुम्ही एक नवबार तयार करणार आहात जे कुतूहल वाढवते आणि अभ्यागतांना एकत्र आणते. परफेक्ट नॅव्हबार डिझाईन करताना तुम्ही तीन प्रमुख घटक लक्षात घेतले पाहिजेत:
सोपे
ते स्पष्ट आणि वाचण्यास सोपे असावे. प्रत्येक पृष्ठाच्या लिंकसह नॅव्हबारमध्ये गोंधळ घालण्याऐवजी, तुम्ही तुमच्या साइटच्या विस्तृत श्रेणींमध्ये जावे. नंतर, आवश्यक असल्यास तुम्ही ड्रॉपडाउन म्हणून सब-मेनू जोडू शकता.
लक्षवेधी
साधा नवबार अजिबात कंटाळवाणा असण्याची गरज नाही. डिझाईन अधिक सुसंगत बनवण्यासाठी तुम्ही प्री-सेट ब्रँड रंगाला चिकटून राहावे. तुम्ही अनेक रंग योजनांसह प्रयोग करू शकता आणि हायलाइटिंग आणि ड्रॉपडाउन मेनूसाठी फिकट किंवा गडद रंग वापरू शकता.
जबाबदार
स्टॅटिस्टाच्या जागतिक इंटरनेट वापर अहवालात असे दिसून आले आहे की जागतिक लोकसंख्येपैकी 59.5 टक्के लोक सक्रियपणे इंटरनेट वापरत आहेत आणि 92.6 टक्के लोक मोबाइल उपकरणांद्वारे त्याचा वापर करत आहेत. तुमच्या साइटवर प्रतिसादात्मक मोबाइल नेव्हिगेशन लागू करण्याचे महत्त्व समजून घेण्यासाठी हे पुरेसे आहे.
उच्च-स्तरीय मोबाइल नेव्हिगेशन खूप लोकप्रिय आहे. तुम्ही हॅम्बर्गर मेनू, गिलोटिन्स, फ्लोटिंग आयकॉन आणि टॅब वापरू शकता. जेव्हा तुमच्याकडे एकाधिक पदानुक्रमांसह पाच किंवा अधिक श्रेणी असतात तेव्हा हे तारणहार आहे. उच्च-स्तरीय नेव्हिगेशन लक्षणीय स्क्रीन जागा वाचवू शकते, विशेषत: जेव्हा तुमच्याकडे सामग्री-भारी साइट असते.
संदर्भित चिन्हांसह टॅब बार खालच्या नेव्हिगेशन बारसाठी योग्य आहेत कारण त्यामध्ये सामान्यत: पदानुक्रमाच्या समान स्तरावर तीन ते पाच मेनू असतात. सबमेनू आणि अनुक्रमिक मेनू पालक-मुलाच्या नातेसंबंधासह मुख्य श्रेणीचे अनुसरण करतात.
अधिक टिपांसाठी प्रतिक्रियाशील वेब डिझाइन तत्त्वांवरील आमचा सखोल लेख पहा.
हॅम्बर्गर मेनूसह प्रतिसादात्मक नेव्हिगेशन बार तयार करणे
आता डिझाइनची तत्त्वे तुमच्या मनात अगदी स्पष्ट आहेत, चला मेनू तयार करण्यास सुरुवात करूया. प्रतिसाद देणार्‍या वेबसाइट तयार करण्यासाठी विविध सीएसएस वैशिष्ट्ये आहेत. तथापि, या लेखात, तुम्ही अगदी सुरुवातीपासूनच CSS फ्लेक्सबॉक्स आणि मीडिया क्वेरीसह प्रतिसादात्मक नेव्हिगेशन मेनू तयार करण्यास शिकाल.
तुमच्याकडे सेवा (मुख्य) मेनूमध्ये ड्रॉपडाउन मेनू असेल. डेस्कटॉप नॅव्हबार तयार करताना आम्ही हॅम्बर्गर मेनू वगळू शकतो. शेवटी, आम्ही अद्याप चेकबॉक्स वर्कफ्लोवर चर्चा केलेली नाही. तुमची HTML नवबार रचना आता पूर्ण झाली आहे.
CSS फ्लेक्सबॉक्स वापरून नवबार स्टाईल करणे
आम्ही CSS फ्लेक्सबॉक्स वापरू आणि हायलाइट करण्यासाठी होव्हर प्रभाव लागू करू. सेवा मेनूवर थोडे अतिरिक्त लक्ष देणे आवश्यक आहे कारण तुम्हाला डिस्प्ले सेट करावा लागेल: काहीही नाही; सामान्य परिस्थितीसाठी आणि ते प्रदर्शित करण्यासाठी सेट करा: ब्लॉक; जेव्हा कोणी त्यावर फिरवते.
CSS मीडिया क्वेरी वापरून प्रतिसाद देणारा Navbar
आम्ही आधी सांगितल्‍याप्रमाणे, तुम्हाला हॅमबर्गर मेनू केवळ लहान स्क्रीन आकारांसह मोबाइल डिव्‍हाइसवर दृश्‍यमान असेल. यासाठी तुम्हाला <ul class=”nav-links”> ची दोन मुले असतील. प्रथम, तुम्ही इनपुट type=”checkbox” वापराल आणि लेबलला class=”hamburger” द्याल. दुसरे, तुमचा नेव्हिगेशन मेनू class=”menu” द्या.
चेकबॉक्स घटक वापरण्यामागील तर्क असा आहे की जेव्हा ते अनचेक केले जाते तेव्हा त्यात डिस्प्ले असेल: काहीही नाही; तर तपासताना ते डिस्प्ले:ब्लॉक वर सेट करून नॉर्मल सिबलिंग सिलेक्टर (~) ची CSS प्रॉपर्टी बदलेल; सोप्या भाषेत सांगायचे तर, विस्तारित आणि लपविलेल्या स्थितींमध्ये हॅम्बर्गर आणि नेव्हिगेशन मेनू टॉगल करण्यासाठी तुम्ही चेकबॉक्सेस वापरत आहात.
खाली दर्शविल्याप्रमाणे CSS मीडिया क्वेरी वापरून मोबाइल डिव्हाइससाठी नॅव्हबार शैलीबद्ध करा. या प्रकरणात, तुम्ही मोबाइल मेनूसाठी CSS ग्रिड आणि JS देखील वापरू शकता.
तुमचा आदर्श नेव्हिगेशन बार डिझाइन करण्याचा सर्वोत्तम मार्ग म्हणजे वापरणे
चांगल्या वेबसाइट नेव्हिगेशनचा बाउंस दर आणि रूपांतरण दरांवर मोठा प्रभाव पडतो. मूलत:, तुमच्या वेबसाइटच्या पहिल्या लेयरमध्ये स्पष्ट संदर्भ, श्रेणीबद्ध नॅव्हिगेशन आणि कॉल-टू-ऍक्शन असावेत. तुमची वेबसाइट नेव्हिगेशन रचना अभ्यागतांना तुमच्या साइटवरील लोकप्रिय किंवा ट्रेंडिंग पेजवर तीन क्लिक किंवा त्यापेक्षा कमी वेळा पोहोचण्यात मदत करेल. तर, उत्तम साइट नेव्हिगेशन वापरणे आणि डिझाइन करणे सुरू ठेवा!