मेगा मेनू क्या है? (और जब आपकी साइट को वास्तव में इसकी आवश्यकता हो)

एक मेगा मेनू क्या है, एक नेविगेशन आइटम के तहत एक विस्तृत बहु-स्तंभ ड्रॉपडाउन पैनल के साथ सचित्र

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

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

मेगा मेनू क्या है?

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

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

कैसे एक मेगा मेनू एक मानक ड्रॉपडाउन से अलग होता है

व्यावहारिक अंतर तीन चीजों पर आता है: चौड़ाई, संरचना और सामग्री प्रकार।

  • चौड़ाई: एक मानक ड्रॉपडाउन 200 से 300 पिक्सेल चौड़ा चलता है; एक मेगा मेनू अधिकांश व्यूपोर्ट तक फैल सकता है।
  • संरचना: ड्रॉपडाउन एक कॉलम है; एक मेगा मेनू कई कॉलमों का उपयोग करता है, जिन्हें अक्सर उप-शीर्षकों के अंतर्गत समूहीकृत किया जाता है।
  • सामग्री: ड्रॉपडाउन सादा पाठ लिंक है; एक मेगा मेनू अक्सर लिंक को आइकन, थंबनेल छवियों या संक्षिप्त विवरण के साथ मिलाता है।

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

मेगा मेनू बनाम ड्रॉपडाउन बनाम ऑफ-कैनवास मेनू

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

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

जब एक मेगा मेनू वास्तव में मदद करता है

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

परीक्षण सरल है: यदि आपके वर्तमान ड्रॉपडाउन को पहले से ही स्क्रॉलबार की आवश्यकता है, या विज़िटर खोज के माध्यम से श्रेणी पृष्ठों पर उतर रहे हैं क्योंकि वे उन्हें हेडर में नहीं ढूंढ सके, तो एक मेगा मेनू एक वास्तविक समस्या को सजाने के बजाय हल कर रहा है।

जब एक मेगा मेनू मदद करने से ज्यादा दर्द होता है

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

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

सामान्य मेगा मेनू डिज़ाइन पैटर्न

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

पहुंच और मोबाइल संबंधी विचार

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

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

एलिमेंटर में मेगा मेनू फ्री कैसे बनाएं

एलिमेंट का अपना मेगा मेनू विकल्प एलिमेंट प्रो के पीछे रहता है, एलिमेंट में शामिल नेस्टेड मेनू घटक के अंदर मेगा मेनू दस्तावेज़ीकरण। यदि आप एलिमेंटर के निःशुल्क संस्करण पर हैं, तो वह पथ बंद है।

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

  1. एलिमेंटर के साथ मास्टर ऐडऑन (मुक्त) स्थापित और सक्रिय करें, फिर मास्टर ऐडऑन → एक्सटेंशन से मेगा मेनू एक्सटेंशन सक्षम करें।
मास्टर ऐडऑन एक्सटेंशन सेटिंग्स स्क्रीन मेगा मेनू एक्सटेंशन टॉगल के साथ डिस्प्ले विजेट के तहत चालू हो रही है
  1. उपस्थिति → मेनू पर जाएं, या अपना हेडर खोलें मास्टर एडॉन्स थीम बिल्डर यदि आपका हेडर यहीं रहता है, और मेगा मेनू सक्षम करें पर स्विच करें। प्रत्येक मेनू आइटम के बगल में एक बैंगनी मास्टर मेगा बैज दिखाई देता है; जिस आइटम को आप मेगा मेनू में बदलना चाहते हैं उस पर बैज पर क्लिक करें।
मास्टर ऐडऑन के साथ वर्डप्रेस मेनू स्क्रीन मेगा मेनू टॉगल सक्षम करें और प्रत्येक मेनू आइटम के बगल में बैंगनी मास्टर मेगा बैज
  1. उस आइटम पर मेगा मेनू सक्षम करें, फिर पैनल को डिज़ाइन करने के लिए एलिमेंटर के साथ संपादित करें पर क्लिक करें: कॉलम, चित्र, आइकन, या प्रोमो ब्लॉक, जो भी अनुभाग की आवश्यकता हो।
एलिमेंटर संपादक दो लिंक कॉलम और एक विशेष छवि ब्लॉक के साथ एक मेगा मेनू पैनल डिजाइन कर रहा है
  1. पैनल की चौड़ाई, पूरी चौड़ाई या निहित सेट करें, फिर इसे डेस्कटॉप और वास्तविक फोन दोनों पर प्रकाशित और जांचें।
प्रकाशित पूर्ण चौड़ाई मेगा मेनू एक लाइव साइट पर उत्पाद आइटम के अंतर्गत खुला है, जिसमें लिंक कॉलम और एक विशेष छवि दिखाई गई है

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

अक्सर पूछे जाने वाले प्रश्न

मेगा मेनू का क्या मतलब है?

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

मेगा मेनू कैसे बनाएं?

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

एक नियमित मेनू और एक मेगा मेनू के बीच अंतर क्या है?

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

मेगा मेनू का उपयोग करने के क्या फायदे हैं?

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

क्या मैक्स मेगा मेनू मुफ्त है?

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

मैं अपना खुद का मेनू कैसे बनाऊं?

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

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

40% सब कुछ बंद

प्रत्येक मास्टर एडॉन्स प्रो योजना, वार्षिक और जीवनकाल एक कोड, आठ दिन।

00दिनों
00घंटे
00मिन
00सेकंड

सोमवार 14 सितंबर, 23:59 ईटी को समाप्त होता है

  • व्यक्तिगत1 साइट $129$77
  • व्यापार5 साइटें $199$119
  • डेवलपरअसीमित साइटेंएजेंसियों के लिए सर्वश्रेष्ठ $599$359

एक बार भुगतान करें कोई नवीनीकरण नहीं, कभी भी।

कूपन कोड MALIFE40
अब ४०% की छूट प्राप्त करें
  • 30,000+ सक्रिय इंस्टाल
  • 212 समीक्षाओं में से 4.5/5
  • 14 दिन का पैसा वापस