हैमबर्गर मेन्यू एक साफ़-सुथरा और स्पेस बचाने वाला विकल्प है, जो विज़िटर के मेन्यू आइकन पर क्लिक करने पर ही दिखाई देता है। हैमबर्गर मेन्यू के डिज़ाइन एलिमेंट्स पर आपका पूरा कंट्रोल होता है, जिससे आप इसे अपनी खास ब्रांडिंग और स्टाइल के मुताबिक कस्टमाइज़ कर सकते हैं।
अपनी साइट पर हैमबर्गर मेन्यू जोड़ने के 2 आसान तरीके हैं। आप ऐड एलिमेंट्स पैनल से बिल्कुल नया हैमबर्गर मेन्यू जोड़ सकते हैं या ऐक्शन बार से किसी मौजूदा मेन्यू को तुरंत हैमबर्गर स्टाइल में बदल सकते हैं।
हैमबर्गर मेन्यू जोड़ने के लिए:
- अपने एडिटर पर जाएं।
- चुनें कि आगे क्या करना है:
नया हैमबर्गर मेन्यू जोड़ें
- एडिटर में सबसे ऊपर बाईं ओर + ऐड पर क्लिक करें।
- मेन्यू कैटेगरी चुनें।
टिप: लिस्ट ब्राउज़ करने के लिए, कैटेगरी के आगे मौजूद एरो आइकन
पर क्लिक करें। - हैमबर्गर मेन्यू टैब चुनें।
- संबंधित मेन्यू को ड्रैग और ड्रॉप करके पेज पर अपनी पसंद की जगह पर ले जाएं।
मौजूदा लेआउट को हैमबर्गर में बदलें
- संबंधित मेन्यू पर क्लिक करें।
- ऐक्शन बार में चेंज फ़ॉर्मैट पर क्लिक करें।
- मेन्यू के तहत हैमबर्गर चुनें।
हैमबर्गर मेन्यू बटन आपकी साइट के नेविगेशन का अहम हिस्सा है और आप इसे आसानी से अपनी स्टाइल से मैच कर सकते हैं। आइकन और टेक्स्ट को अपनी पसंद के मुताबिक सेट करें, फिर रंगों, स्पेसिंग और ऐनिमेशन तक हर डिज़ाइन डीटेल को फ़ाइन-ट्यून करें।
'ओपन' बटन को कस्टमाइज़ करने के लिए:
- अपने एडिटर पर जाएं।
- हैमबर्गर मेन्यू आइकन पर क्लिक करें।
- चुनें कि बटन को कैसे कस्टमाइज़ करना है:
- एक्शन बार में कस्टमाइज़ आइकन पर क्लिक करें।
- चुनें कि आपका आइकन स्टैटिक है या एनिमेटेड।
टिप: अपना एनिमेटेड आइकन बनाने के लिए, क्रिएट एनिमेटेड आइकन पर क्लिक करें और एक स्टार्ट तथा एंड आइकन चुनें। - रिप्लेस आइकन
पर क्लिक करें, जो आइकन चुनें के नीचे है। - मीडिया मैनेजर से नया आइकन चुनें और अपडेट करें पर क्लिक करें।
- (एनिमेटेड आइकन के लिए) एनिमेशन की अवधि सेट करें।
- एक्शन बार में सेटिंग्स आइकन
पर क्लिक करें। - चुनें कि आगे क्या करना है:
- बटन पर आइकन के आगे दिखने वाला टेक्स्ट डालें, जैसे 'मेन्यू' या 'ओपन'।
- वह आइकन रिप्लेस करें जिस पर क्लिक करने से विज़िटर मेन्यू खोलते हैं।
- एक ऐसा एक्सेसिबल नाम (ऑल्ट टेक्स्ट) जोड़ें जो सर्च इंजन और स्क्रीन रीडर के लिए आइकन के बारे में बताता हो।
एक्शन बार में सभी डिज़ाइन विकल्प आइकन
पर क्लिक करें।
चुनें कि क्या डिज़ाइन करना है: के नीचे बटन का संबंधित हिस्सा चुनें।
ओपन बटन: पूरे बटन को डिज़ाइन करें—इसका फिल कलर, बॉर्डर, कॉर्नर, शैडो, स्पेसिंग, एलाइनमेंट और बहुत कुछ।
टेक्स्ट: हैमबर्गर मेन्यू बटन पर आइकन के आगे दिखने वाले टेक्स्ट का डिज़ाइन और फॉर्मेटिंग कंट्रोल करें।
एनिमेटेड आइकन: आइकन का कलर, साइज़ और रोटेशन एंगल बदलें।
जब विज़िटर आपके हैमबर्गर मेन्यू आइकन पर क्लिक करते हैं, तो आपकी साइट का मेन्यू ओवरले वाले एक बड़े कंटेनर में खुलता है, जिससे मेन्यू को पढ़ना आसान होता है। इसे पर्सनलाइज़ करने के लिए काफी जगह मिलती है—आप कंटेनर, मेन्यू और ओवरले के कलर एडजस्ट कर सकते हैं और अपने लोगो या सोशल बार जैसे दूसरे एलिमेंट जोड़ सकते हैं।
हैमबर्गर मेन्यू के कंटेनर को कस्टमाइज़ करने के लिए:
- अपने एडिटर पर जाएं।
- कंटेनर एक्सेस करें:
- हैमबर्गर मेन्यू आइकन पर क्लिक करें।
- रेगुलर मोड ड्रॉपडाउन पर क्लिक करें और हैमबर्गर मेन्यू चुनें।
- चुनें कि आगे क्या करना है:
अपने मेन्यू वाले कंटेनर को कस्टमाइज़ करें। आप बैकग्राउंड कलर बदल सकते हैं, बॉर्डर जोड़ सकते हैं, मेन्यू की पोज़िशन बदल सकते हैं और बहुत कुछ कर सकते हैं।
एक्शन बार पर सभी डिज़ाइन विकल्प आइकन
पर क्लिक करें।
पक्का करें कि चूज़ व्हाट टू डिज़ाइन के तहत हैमबर्गर मेन्यू चुना गया है।
कंटेनर को डिज़ाइन करें:
फिल कलर्स
: कंटेनर का बैकग्राउंड कलर और ओवरले कलर बदलें। इसके लिए अपने ब्रांड कलर में से कोई कलर या कस्टम कलर चुनें।
टिप: ओवरले एक सेमी-ट्रांसपेरेंट लेयर है, जो पृष्ठ को ब्लर करती है ताकि विज़िटर मेन्यू पर फ़ोकस कर सकें।
बॉर्डर
: कंटेनर को अलग दिखाने के लिए उसके बॉर्डर सेट करें। आप उनका कलर, चौड़ाई और स्टाइल चुन सकते हैं। बॉर्डर के हर किनारे को अलग से डिज़ाइन करने के लिए एडिट इंडिविजुअल बॉर्डर्स आइकन
पर क्लिक करें।
कॉर्नर
: कंटेनर के कॉर्नर को अधिक चौकोर या गोल बनाने के लिए रेडियस के नीचे मौजूद स्लाइडर को ड्रैग करें। हर कॉर्नर को अलग से डिज़ाइन करने के लिए एडिट इंडिविजुअल कॉर्नर्स आइकन
पर क्लिक करें।
शैडो
: कंटेनर को दिलचस्प 3D इफ़ेक्ट देने के लिए इनर और आउटर शैडो लगाएं। आप इसकी पोज़िशन, ब्लर, कलर और दूसरी सेटिंग तय कर सकते हैं।
स्पेसिंग
: कंटेनर के चारों ओर पैडिंग जोड़ें, ताकि आपके कंटेंट को पर्याप्त स्पेस मिले।
लेआउट
: तय करें कि क्लोज़ बटन, कंटेनर के अंदर मौजूद मेन्यू और पृष्ठ के मुकाबले कंटेनर कहां दिखाई देंगे। आप यह भी चुन सकते हैं कि कंटेनर कितनी जगह घेरेगा, जैसे पृष्ठ का एक-तिहाई या आधा हिस्सा।
मेन्यू मैनेज और डिज़ाइन करें
मेन्यू पर क्लिक करें।
चुनें कि आगे क्या करना है:
मेन्यू आइटम मैनेज करें: एक्शन बार पर मैनेज मेन्यू पर क्लिक करें और मेन्यू आइटम जोड़ें, रीऑर्डर करें या हटाएं।
मेन्यू डिज़ाइन करें: एक्शन बार पर सभी डिज़ाइन विकल्प आइकन
पर क्लिक करें। चुनें कि आप क्या डिज़ाइन करना चाहते हैं—मेन्यू आइटम, जैसे फ़ॉन्ट, टेक्स्ट कलर और स्पेसिंग, या मेन्यू बार, जैसे बैकग्राउंड कलर, आइटम की चौड़ाई और मेन्यू आइटम के बीच का स्पेस।
कंटेनर में एलिमेंट्स जोड़ें
ऐड एलिमेंट्स पैनल से एलिमेंट्स को ड्रैग करके कंटेनर पर छोड़ें। उदाहरण के लिए, आप अपना लोगो, सोशल बार, हाल के प्रोमो की जानकारी या अपनी पसंद का कोई भी एलिमेंट दिखा सकते हैं।
उस बटन को पर्सनलाइज़ करें जिस पर विज़िटर हैमबर्गर मेन्यू बंद करने के लिए क्लिक करते हैं। आइकन बदलें, मददगार टेक्स्ट जोड़ें (जैसे, 'एग्ज़िट') और इसे अपनी पसंद के अनुसार डिज़ाइन करें।
'क्लोज़' बटन को कस्टमाइज़ करने के लिए:
- अपने एडिटर पर जाएं।
- 'क्लोज़' बटन को एक्सेस करें:
- हैमबर्गर मेन्यू आइकन चुनें।
- रेगुलर मोड ड्रॉपडाउन पर क्लिक करें और हैमबर्गर मेन्यू चुनें।
- 'क्लोज़' बटन पर क्लिक करें।
- एक्शन बार से चुनें कि अब आपको क्या करना है:
- एक्शन बार पर टेक्स्ट एडिट करें पर क्लिक करें।
- वह टेक्स्ट डालें जिसे आप आइकन के बगल में दिखाना चाहते हैं (जैसे, 'एग्ज़िट', 'क्लोज़')।
- एक्शन बार पर आइकन कस्टमाइज़ करें पर क्लिक करें।
- चुनें कि आपका आइकन स्टैटिक है या एनिमेटेड।
टिप: शुरुआती और आखिरी आइकन का इस्तेमाल करके अपना एनिमेटेड आइकन बनाने के लिए, एनिमेटेड आइकन बनाएं पर क्लिक करें। - रिप्लेस आइकन
पर क्लिक करें, जो आइकन चुनें के नीचे है। - मीडिया मैनेजर से नया आइकन चुनें और अपडेट करें पर क्लिक करें।
- (एनिमेटेड आइकन के लिए) एनिमेशन की अवधि सेट करें।
'क्लोज़' बटन डिज़ाइन करें
एक्शन बार पर सभी डिज़ाइन विकल्प आइकन
पर क्लिक करें।
क्या डिज़ाइन करना है, चुनें के तहत एलिमेंट का संबंधित हिस्सा चुनें:
क्लोज़ बटन: पूरे बटन को डिज़ाइन करें—इसका फिल कलर, बॉर्डर, कॉर्नर, शैडो, स्पेसिंग, एलाइनमेंट वगैरह। अगर आपके बटन में आइकन और टेक्स्ट दोनों हैं, तो आप उनकी पोज़िशन भी तय कर सकते हैं।
आइकन: आइकन का साइज़, कलर और एंगल बदलें।
टेक्स्ट: आइकन के बगल में दिखने वाले टेक्स्ट को डिज़ाइन करें। फ़ॉन्ट, फ़ॉर्मेटिंग, एलाइनमेंट, कैरेक्टर स्पेसिंग वगैरह बदलें।