अकॉर्डियन मेनू: 4 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

केवल HTML और CSS का उपयोग करके एक बहु-स्तरीय अकॉर्डियन मेनू बनाएं।

जबकि मैं अपनी परियोजनाओं के लिए रास्पबेरी पाई का उपयोग करता हूं, यह किसी भी वेब सर्वर पर चल सकता है।

किसी विशेष वेब तत्व को बनाने के उदाहरण प्रदान करने के बजाय, लक्ष्य एक ऐसा टेम्प्लेट बनाना है जिसमें मेरी परियोजनाओं में उपयोग किए जाने वाले प्रत्येक तत्व के कार्य उदाहरण शामिल हों। काम करने वाली किसी चीज़ को संशोधित करना आसान है, फिर उसे काम पर लाने की कोशिश करना।

एक कंप्यूटर, पैड या मोबाइल फोन के माध्यम से रास्पबेरी पाई डिवाइस के लिए एक अकॉर्डियन मेनू का उपयोग इंटरफेस के रूप में किया जा सकता है। जबकि मैं एक रास्पबेरी पाई रनिंग लाइटटीपीडी का उपयोग करता हूं, किसी भी हार्डवेयर और वेब सर्वर का उपयोग किया जा सकता है।

प्रत्येक रास्पबेरी पाई परियोजना में एक इंटरफ़ेस होना चाहिए। अपने अपेक्षाकृत छोटे डिस्प्ले आकार के कारण, मोबाइल फोन सबसे अधिक प्रतिबंधात्मक हैं। एक अकॉर्डियन मेनू एक फोन की सीमा के आसपास (+) का विस्तार करके और (-) को लंबवत रूप से आवश्यकतानुसार कई मेनू आइटम की अनुमति देता है।

वेब पर अकॉर्डियन मेनू के कई उदाहरण हैं। क्योंकि मुझे OpenHAB या OpenSprinkler का रूप-रंग पसंद है, मुझे कुछ ऐसा ही चाहिए था।

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

मेरे अनुप्रयोगों में, मुझे समर्थन के लिए मेनू की आवश्यकता है:

• अन्य वेबसाइटों या उपकरणों के लिंक,
• मूल्य या स्थिति प्रदर्शित करें और
• मूल्यों के लिए अद्यतन की अनुमति दें।

अंतिम दो को HTML और CSS से अधिक की आवश्यकता होती है।

चूंकि मुझे पहले से पता नहीं है कि मुझे कितने मेनू आइटम की आवश्यकता होगी, एक अकॉर्डियन मेनू लचीलेपन को मेनू को आवश्यकतानुसार विस्तारित करने की अनुमति देता है।

सीएसएस और एचटीएमएल में मेरी टिप्पणियां ऊपर से थोड़ी अधिक हो सकती हैं, लेकिन मैं टिप्पणियों को देख सकता हूं और सीएसएस को फिर से सीखने के बिना मेरी जरूरतों को पूरा करने के लिए मेनू को कैसे बदल सकता हूं। टिप्पणियों से मेरे लिए यह समझना भी आसान हो जाता है कि सीएसएस HTML को कैसे प्रभावित करता है बिना दोनों के बीच आगे-पीछे फ़्लिप किए।

मेरी कुछ अन्य आवश्यकताएं थीं:

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

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

चरण 1: चरण-दर-चरण स्थापित करें

मैकबुक या पीसी पर टर्मिनल विंडो खोलें और निम्नलिखित कमांड चलाएँ:

के आइटम को वास्तविक मानों से बदलें।

रास्पबेरी पाई में लॉगिन करें

$ ssh pi@♣रास्पबेरी-पाई-आईपी-पता♣

मुख्य निर्देशिका में बदलें

$ सीडी / वार / www

index.html डाउनलोड करें, और अनुमतियाँ और फ़ाइल का स्वामी बदलें

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

$ sudo chmod 774 index.html $ sudo chown pi index.html

छवियों के लिए एक निर्देशिका बनाएँ और उस निर्देशिका में जाएँ

$mkdir img

$ सीडी आईएमजी

छवियों को डाउनलोड करें और स्वामी को बदलें।

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ रास्पबेरी-pi.png" $ sudo chown pi *.png

मुख्य निर्देशिका में बैकअप लें, और सीएसएस निर्देशिका बनाएं और उसमें जाएं

$ सीडी..

$ एमकेडीआईआर सीएसएस $ सीडी सीएसएस

स्टाइल शीट डाउनलोड करें, और अनुमतियाँ और फ़ाइल का स्वामी बदलें

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

यदि आपके पास रास्पबेरी पाई नहीं है, तो आप इन फ़ाइलों को मैक या पीसी पर डाउनलोड कर सकते हैं। मैक या पीसी से मेनू चलाने के लिए, या तो

• index.html पर डबल क्लिक करें, या
• index.html चुनें, राइट क्लिक करें, और अपनी पसंद के ब्राउज़र से खोलें।

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

रास्पबेरी-पीआई-आईपी-एड्रेस♣/index.html

मेरे सर्वर को एक सुरक्षित कनेक्शन की आवश्यकता है (बृहदान्त्र के आसपास रिक्त स्थान निकालें):

♣रास्पबेरी-पीआई-आईपी-एड्रेस♣/index.html

और यह काम करता है!

चरण 2: परिशिष्ट: संदर्भ

• केवल HTML और CSS का उपयोग करके CSS स्क्रिप्ट बहुस्तरीय अकॉर्डियन मेनू
• W3Schools अकॉर्डियन मेनू
• W3Schools CSS
• W3Schools HTML

चरण 3: परिशिष्ट: अद्यतन

चरण 4: परिशिष्ट: समस्या निवारण

यहां कुछ विचार दिए गए हैं जो मदद कर सकते हैं:

• PHP इको स्टेटमेंट में HTML को फॉर्मेट करने के लिए, रिटर्न कैरेक्टर में डालने के लिए अंत में "\r" जोड़ें
• उप-मेनू के लिए समूह-आईडी अद्वितीय होना चाहिए। यदि किसी उप-मेनू का समूह-आईडी अद्वितीय नहीं है तो उसके उप-मेनू आइटम समूह-आईडी के पहले उदाहरण में शामिल किए जाएंगे