कैसे एक उत्तरदायी नेविगेशन बनाने के लिए

सबसे पेचीदा हिस्सों में से एक responsified एक वेबसाइट पर है “नेविगेशन”, वेबसाइट की पहुंच के लिए यह हिस्सा वास्तव में महत्वपूर्ण है, क्योंकि यह उन तरीकों में से एक है जो आगंतुक वेब पेजों पर कूदते हैं.

उत्तरदायी वेब साइट नेविगेशन बनाने के लिए वास्तव में कई तरीके हैं और यहां तक कि कुछ jQuery प्लगइन्स भी इसे एक सेकंड में करने के लिए उपलब्ध हैं.

हालाँकि, एक त्वरित समाधान लागू करने के बजाय, इस पोस्ट में, हम आपके माध्यम से चलने जा रहे हैं कैसे जमीन से एक सरल नेविगेशन बनाने के लिए और स्मार्टफोन की तरह छोटे स्क्रीन आकार में इसे प्रदर्शित करने के लिए CSS3 मीडिया क्वेश्चन और थोड़ा jQuery का उपयोग करना.

तो, चलो बस शुरू हो जाओ.

डेमो
स्रोत डाउनलोड करें

एचटीएमएल

सबसे पहले, आइए मेटा व्यूपोर्ट को अंदर जोड़ें सिर टैग। इस मेटा व्यूपोर्ट किसी भी स्क्रीन आकार के अंदर, विशेष रूप से मोबाइल व्यूपोर्ट में हमारे पेज को ठीक से स्केल करने के लिए टैग की आवश्यकता होती है.

… और फिर निम्नलिखित स्निपेट को नेविगेशन मार्कअप के अंदर जोड़ें तन टैग.

   होम
 कैसे
 प्रतीक
 डिज़ाइन
 वेब 2.0
 उपकरण
 
 मेन्यू

जैसा कि आप ऊपर देख सकते हैं, हमारे पास छह प्राथमिक मेनू लिंक हैं और उनके बाद एक और लिंक जोड़ा गया है। इस अतिरिक्त लिंक का उपयोग किया जाएगा खींचें मेनू नेविगेशन जब यह एक छोटी स्क्रीन में छिपा होता है.

आगे की पढाई: व्यूपोर्ट मेटा टैग को न भूलें.

शैलियाँ

इस खंड में, हम नेविगेशन को स्टाइल करना शुरू करते हैं। यहां की शैली केवल सजावटी है, आप अपनी इच्छानुसार कोई भी रंग चुन सकते हैं। लेकिन इस मामले में, हम (मैं व्यक्तिगत रूप से) चाहते हैं तन एक नरम और मलाईदार रंग है.

 body पृष्ठभूमि-रंग: # ece8e5;

एनएवी नेविगेशन को परिभाषित करने वाले टैग में होगा 100% ब्राउज़र विंडो की पूरी चौड़ाई, जबकि उल जहाँ इसमें हमारे प्राथमिक मेनू लिंक होंगे 600px चौड़ाई के लिए.

 नौसेना ऊंचाई: 40 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 455868; फ़ॉन्ट-आकार: 11pt; फ़ॉन्ट-परिवार: 'पीटी संस', एरियल, संस-सेरिफ़; फोंट की मोटाई: बोल्ड; स्थिति: रिश्तेदार; बॉर्डर-बॉटम: 2px ठोस # 283744;  नौसेना उल गद्दी: 0; मार्जिन: 0 ऑटो; चौड़ाई: 600px; ऊंचाई: 40 पीएक्स;

फिर हम करेंगे नाव मेनू बाईं ओर लिंक करता है, इसलिए उन्हें क्षैतिज रूप से साइड में प्रदर्शित किया जाएगा, लेकिन एक तत्व तैरने से उनके मूल पतन का कारण भी होगा.

 नौसेना ली प्रदर्शन: इनलाइन; बाईंओर तैरना;

यदि आप ऊपर दिए गए HTML मार्कअप से नोटिस करते हैं, तो हम पहले ही जोड़ चुके हैं clearfix में कक्षा दोनों के लिए विशेषता एनएवी तथा उल जब हम इस सीएसएस क्लीयरफिक्स हैक का उपयोग करके इसके अंदर के तत्वों को तैरते हैं, तो चीजों को साफ करने के लिए। तो, चलो स्टाइल शीट में निम्नलिखित शैली के नियम जोड़ते हैं.

 .clearfix: इससे पहले, .clearfix: after content: ""; प्रदर्शन: टेबल;  .clearfix: after स्पष्ट: दोनों;  .clearfix * ज़ूम: 1;

चूंकि हमारे पास छह मेनू लिंक हैं और हमने कंटेनर को भी निर्दिष्ट किया है 600px, प्रत्येक मेनू लिंक होगा 100px चौड़ाई के लिए.

 नौसेना एक color: #fff; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 100px; पाठ-संरेखण: केंद्र; पाठ-सजावट: कोई नहीं; लाइन-ऊँचाई: 40 पीएक्स; पाठ-छाया: 1px 1px 0px # 283744;

मेनू लिंक के साथ अलग किया जाएगा 1px सही सीमा, पिछले एक को छोड़कर। बॉक्स मॉडल पर हमारी पिछली पोस्ट को याद रखें, मेनू की चौड़ाई के लिए विस्तार किया जाएगा 1px इसे बना रहे हैं 101px सीमा जोड़ के रूप में, इसलिए यहां हम बदलते हैं बॉक्स आकार के लिए मॉडल सीमा-बॉक्स ताकि मेन्यू बना रहे 100px.

 nav li a बॉर्डर-राइट: 1px सॉलिड # 576979; बॉक्स-आकार: सीमा बॉक्स; -moz बॉक्स-आकार: सीमा बॉक्स; -webkit-बॉक्स आकार: सीमा बॉक्स;  नेवी ली: आखिरी बच्चे एक बॉर्डर-राइट: 0;

इसके बाद, मेनू में हल्का रंग होगा जब यह अंदर होगा : मंडराना या : सक्रिय राज्य.

 nav a: hover, nav a: active पृष्ठभूमि-रंग: # 8c99a4;

... और अंत में, अतिरिक्त लिंक छिपाया जाएगा (डेस्कटॉप स्क्रीन के लिए).

 नौसेना एक # पुल प्रदर्शन: कोई नहीं;

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

आगे की पढाई: CSS3 बॉक्स-आकार (Hongkiat.com)

मीडिया के प्रश्नों

CSS3 मीडिया क्वेश्चन का उपयोग यह परिभाषित करने के लिए किया जाता है कि शैलियों को कुछ निश्चित ब्रेकपॉइंट्स या विशेष रूप से डिवाइस स्क्रीन आकारों में कैसे स्थानांतरित किया जाएगा.

चूंकि हमारा नेविगेशन शुरू में है 600px फिक्स-चौड़ाई, हम पहले शैलियों को परिभाषित करेंगे जब इसे देखा जाएगा 600px या कम स्क्रीन आकार, इसलिए व्यावहारिक रूप से बोल रहा हूँ, इस हमारा पहला ब्रेकपॉइंट है.

इस स्क्रीन आकार में, दो मेनू लिंक प्रत्येक पक्ष में एक साथ प्रदर्शित होंगे, इसलिए उलयहाँ चौड़ाई होगी 100% ब्राउज़र विंडो के जबकि मेनू लिंक होगा 50% चौड़ाई के लिए.

 @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 600px) नौसेना ऊंचाई: ऑटो;  नौसेना उल चौड़ाई: 100%; प्रदर्शन क्षेत्र; ऊंचाई: ऑटो;  नौसेना ली चौड़ाई: 50%; बाईंओर तैरना; स्थिति: रिश्तेदार;  nav li a बॉर्डर-बॉटम: 1px सॉलिड # 576979; बॉर्डर-राइट: 1px ठोस # 576979;  नेवी a text-align: left; चौड़ाई: 100%; पाठ-इंडेंट: 25 पीएक्स;

… और फिर, हम यह भी परिभाषित करते हैं कि स्क्रीन के छोटे होने पर नेविगेशन कैसे प्रदर्शित होता है 480px गुणित या कम (इसलिए यह हमारा दूसरा ब्रेकपॉइंट है).

इस स्क्रीन आकार में, हमने जो अतिरिक्त लिंक जोड़ा है, वह दिखाई देना शुरू हो जाएगा और हम लिंक को भी दे देंगे “मेन्यू” का उपयोग कर इसके दाईं ओर आइकन :बाद छद्म तत्व, जबकि स्क्रीन पर अधिक ऊर्ध्वाधर रिक्त स्थान को बचाने के लिए प्राथमिक मेनू लिंक छिपाए जाएंगे.

 @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 480px) नौसेना बॉर्डर-बॉटम: 0;  नौसेना उल प्रदर्शन: कोई नहीं; ऊंचाई: ऑटो;  नौसेना एक # पुल प्रदर्शन: ब्लॉक; पृष्ठभूमि-रंग: # 283744; चौड़ाई: 100%; स्थिति: रिश्तेदार;  नेवी # ए पुल: कंटेंट: ""; पृष्ठभूमि: url ('nav-icon.png') नो-रिपीट; चौड़ाई: 30 पीएक्स; ऊंचाई: 30 पीएक्स; प्रदर्शन: इनलाइन-ब्लॉक; स्थिति: निरपेक्ष; सही: 15 पीएक्स; शीर्ष: 10 पीएक्स;

अंत में, जब स्क्रीन छोटा हो जाता है 320px और निचले मेनू को ऊपर से नीचे तक लंबवत प्रदर्शित किया जाएगा.

 @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) नौसेना ली प्रदर्शन: ब्लॉक; फ्लोट: कोई नहीं; चौड़ाई: 100%;  nav li a बॉर्डर-बॉटम: 1px सॉलिड # 576979;

अब, आप ब्राउज़र विंडो का आकार बदलने का प्रयास कर सकते हैं। यह अब स्क्रीन आकार को अनुकूलित करने में सक्षम होना चाहिए.

आगे की पढाई: मानक उपकरणों के लिए मीडिया क्वेरी.

मेनू दिखा रहा है

इस बिंदु पर, मेनू अभी भी छिपा होगा और केवल तभी दिखाई देगा जब टैप करके या उस पर क्लिक करके इसकी आवश्यकता होगी “मेन्यू” लिंक और हम jQuery का उपयोग करके प्रभाव को प्राप्त कर सकते हैं slideToggle ().

 $ (फ़ंक्शन () var पुल = $ (function # पुल ’); मेनू = $ ((नेव उल’); मेनूहाइट = मेनू.हाईट (); $ (पुल) .on ('क्लिक ’, फंक्शन (ई) e.preventDefault (); menu.slideToggle ();););

हालाँकि, जब आप ब्राउज़र विंडो को आकार बदलने के ठीक बाद देखते हैं और मेनू को छोटी स्क्रीन में छिपाते हैं, तो मेनू छिपा रहेगा, जैसा कि कुछ भी डिस्प्ले मत करो jQuery द्वारा उत्पन्न शैली अभी भी तत्व में संलग्न है.

इसलिए, हमें विंडो को आकार देने पर इस शैली को हटाने की आवश्यकता है, इस प्रकार है:

 $ (खिड़की) .resize (फ़ंक्शन () var w = $ (window)। उपलब्धता (); यदि (w> 320 && मेनू.is (': छिपा हुआ))) menu.removeAttr (' शैली ');; );

ठीक है, यह हमारे लिए आवश्यक सभी कोड हैं, अब हम निम्नलिखित लिंक से नेविगेशन देख सकते हैं, और हम आपको उत्तरदायी डिज़ाइन परीक्षण उपकरण, जैसे कि रिस्पाइनेटर, में परीक्षण करने की सलाह देते हैं, ताकि आप इसे एक ही बार में विभिन्न चौड़ाई में देख सकें।.

डेमो
स्रोत डाउनलोड करें

बोनस: एक वैकल्पिक तरीका

जैसा कि हमने इस पोस्ट में पहले भी बताया है कि इसे करने के कुछ और तरीके हैं, और जावास्क्रिप्ट लाइब्रेरी का उपयोग करना SelectNav.js सबसे आसान तरीका है. यह एक शुद्ध जावास्क्रिप्ट है जो jQuery की तरह किसी अन्य तीसरे पक्ष के पुस्तकालय पर निर्भर नहीं है.

असल में, यह आपके सूची मेनू को डुप्लिकेट करेगा और इसे एक में बदल देगा मेनू डिवाइस से ही देशी यूजर इंटरफेस का उपयोग करेगा.

कृपया, आगे के कार्यान्वयन के लिए आधिकारिक दस्तावेज देखें.

निष्कर्ष

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