अनुकूली नेविगेशन: स्मार्टफ़ोन पर मेनू कहाँ से प्राप्त करें

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

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


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

अनुकूली नेविगेशन के लिए कई दृष्टिकोण हैं। आइए उन पर विचार करें।

1. शीर्ष पर नेविगेशन या जैसा है उसे छोड़ दें

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

इस दृष्टिकोण का उपयोग सिंपलिस्ट की खाल में किया जाता है।

लाभ

यह सबसे आसान तक पहुँच जाता है। जावास्क्रिप्ट (और उस पर कोई निर्भरता) का उपयोग करने की आवश्यकता नहीं है, कोई अविश्वसनीय सीएसएस युद्धाभ्यास की आवश्यकता नहीं है।

कमियों

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

उदाहरण

2. पाद लेख के लिए, नेविगेशन के लिए लिंक

पूर्ण विवरण के साथ डेमो करें।

यह तरीका इतना सामान्य नहीं है। इसका सार यह है कि हेडर में एक लिंक बनाया गया है, जो विस्तृत मॉनिटर पर छिपा हुआ है और यदि आवश्यक हो तो मोबाइल उपकरणों पर प्रदर्शित किया जाता है। यह एंकर लिंक मेनू की ओर जाता है, जो साइट के पाद लेख में स्थित है। इस स्थिति में, मेनू स्वयं को सीएसएस का उपयोग करके तैनात किया जाता है, या हेडर और फुटर में डुप्लिकेट किया जाता है, फिर हेडर में मेनू को कम रिज़ॉल्यूशन पर छिपाया जाता है। लिंक के रूप में, आप पाठ और कुछ समझने योग्य आइकन दोनों का उपयोग कर सकते हैं।

गौरव

हेडर में एकमात्र लिंक रहता है, जो बहुत कम जगह लेता है। कोई स्क्रिप्टिंग निर्भरता नहीं।

कमियों

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

उदाहरण

3. नेविगेशन के बजाय ड्रॉप-डाउन सूची (<चयन>)

पूर्ण विवरण के साथ डेमो करें।

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

इस तरह के मेनू के लिए स्क्रिप्टिंग प्रक्रिया को स्मैशिंग पत्रिका पर एक लेख में विस्तार से वर्णित किया गया था। लेकिन आप तैयार किए गए jQuery प्लगइन का उपयोग कर सकते हैं, जैसा कि मैंने अपने समाधान में किया था।

गौरव

स्मूथली कॉम्पैक्ट। एक नेविगेशन तत्व के रूप में पहचानने योग्य और उपयोगकर्ता के लिए परिचित। जटिल नेविगेशन और नेस्टेड मेनू वाली साइटों के लिए एक महान समाधान हो सकता है।

कमियों

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

उदाहरण

4. ड्रॉप-डाउन मेनू

पूर्ण विवरण के साथ डेमो करें।

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

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

var menuText = "Menu"; $( function(){ $("body").addClass("js"); $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>"); $(".menu_main li:has(ul)").addClass("menu_parent"); $(".link_nav").click( function(){ $(".menu_main > ul").toggleClass("menu_expanded"); $(this).toggleClass("menu_parent_exp"); return false; } ) $(".menu_parent").click( function(){ $(this).find(">ul").toggleClass("menu_expanded"); $(this).toggleClass("menu_parent_exp"); return false; } ) } ) 

स्क्रिप्ट एक लिंक बनाता है जो पहले से छिपे हुए मेनू को खोल देगा। आप मामले को देख सकते हैं और डेमो में आवश्यक शैलियों को ले सकते हैं।

गौरव

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

कमियों

जावास्क्रिप्ट निर्भरता। यदि आपको मेनू को चेतन करने की आवश्यकता है तो संभावित प्रदर्शन समस्याएं।

उदाहरण

5. सामग्री शिफ्ट के साथ मेनू से बाहर निकलें

पूर्ण विवरण के साथ डेमो करें।

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

समाधान खोजने से काम नहीं चला, इसलिए इसे बनाया गया।

 $( function(){ $("body").addClass("js"); $(".link_nav").click( function(){ $("body").toggleClass("mobile_nav"); } ); } ) 

वास्तव में, कई स्क्रिप्ट नहीं।

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

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

गौरव

एक दिलचस्प समाधान, उपस्थिति के साथ प्रयोग करने की क्षमता। संदर्भ खो नहीं गया है, क्योंकि सामग्री, हालांकि खिड़की के किनारे से कवर की गई है, अभी भी दिखाई दे रही है।

कमियों

जावास्क्रिप्ट निर्भरता, सीएसएस को अनुकूलित करने की आवश्यकता है। स्थिति: फिक्स्ड मोबाइल उपकरणों के सभी पुराने संस्करणों में समर्थित नहीं है (वहाँ स्थिति होगी: निरपेक्ष), मेनू की ऊंचाई के साथ ऊपर वर्णित समस्या।

उदाहरण

6. भिन्नता

नेविगेशन के दृष्टिकोण और इसकी डिज़ाइन और कार्यक्षमता दोनों में विभिन्न विविधताएँ हैं।

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

दिखाए गए सभी डेमो एचटीएमएल 5 सिंपलिस्ट टेम्पलेट के लिए xtensions एक्सटेंशन का हिस्सा हैं, जिन्हें अपने स्वयं के प्रोजेक्ट में मुफ्त में डाउनलोड और उपयोग किया जा सकता है ।