हैमबर्गर मेन्यू एक साफ-सुथरा और स्पेस बचाने वाला विकल्प है, जो विज़िटर के मेन्यू आइकन पर क्लिक करने पर ही दिखाई देता है। हैमबर्गर मेन्यू के डिज़ाइन एलिमेंट्स पर आपका पूरा कंट्रोल होता है, इसलिए आप इसे अपनी खास ब्रैंडिंग और स्टाइल के मुताबिक कस्टमाइज़ कर सकते हैं।
अपनी साइट पर हैमबर्गर मेन्यू जोड़ने के 2 आसान तरीके हैं। आप ऐड एलिमेंट्स पैनल से बिल्कुल नया हैमबर्गर मेन्यू जोड़ सकते हैं या एक्शन बार से किसी मौजूदा मेन्यू को तुरंत हैमबर्गर स्टाइल में बदल सकते हैं।
हैमबर्गर मेन्यू जोड़ने के लिए:
- अपने एडिटर पर जाएं।
- आगे क्या करना है, चुनें:
नया हैमबर्गर मेन्यू जोड़ें
एडिटर में सबसे ऊपर बाईं ओर + ऐड पर क्लिक करें।
एलिमेंट्स चुनें।
बाईं ओर मेन्यू और सर्च आइकन
पर क्लिक करें।
हैमबर्गर मेन्यू टैब चुनें।
सही मेन्यू को ड्रैग और ड्रॉप करके पेज पर अपनी पसंद की जगह पर ले जाएं।

मौजूदा लेआउट को हैमबर्गर में बदलें
संबंधित मेन्यू पर क्लिक करें।
एक्शन बार में चेंज लेआउट पर क्लिक करें।
मेन्यू के तहत हैमबर्गर मेन्यू चुनें।

आपका हैमबर्गर मेन्यू बटन आपकी साइट के नेविगेशन का अहम हिस्सा है और आप इसे आसानी से अपनी स्टाइल के मुताबिक बना सकते हैं। आइकन और टेक्स्ट को अपनी पसंद के मुताबिक एडजस्ट करें। इसके बाद रंग, स्पेसिंग और एनिमेशन जैसी डिज़ाइन डिटेल्स को फाइन-ट्यून करें।
'ओपन' बटन को कस्टमाइज़ करने के लिए:
- अपने एडिटर पर जाएं।
- हैमबर्गर मेन्यू आइकन पर क्लिक करें।
- बटन को कस्टमाइज़ करने का तरीका चुनें:
एक्शन बार में कस्टमाइज़ मेन्यू आइकन पर क्लिक करें।
चुनें कि आपका आइकन स्टैटिक होगा या एनिमेटेड।
टिप: अपना एनिमेटेड आइकन बनाने के लिए, क्रिएट न्यू एनिमेटेड आइकन पर क्लिक करें और एक स्टार्ट और एंड आइकन का इस्तेमाल करें।
चूज़ एन आइकन के नीचे मौजूद रिप्लेस आइकन
पर क्लिक करें।
मीडिया मैनेजर से नया आइकन चुनें और अपडेट पर क्लिक करें।
(एनिमेटेड आइकन के लिए) एनिमेशन की अवधि सेट करें।

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

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