Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

CSS3 का धाकड़ सा मेगा ड्राप-डाउन मेनू (Drop Down Menu) कैसे बनाएं

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
Build Awesome Practical CSS3 Buttons

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

आम तौर पर इ-कॉमर्स या बड़े स्तर पर बनी वेबसाइट्स में प्रयोग किये जाने वाला, मेगा menus दिन प्रति दिन और लोकप्रिय होता जा रहा है. यह शुद्ध लेआउट को रखते हुए बहुत सारे कंटेंट को दिखाने का उपाय प्रदान करता है. इस टुटोरिअल में, हम सीखेंगे की CSS3 के बहुत अच्छे फीचर का प्रयोग करते हुए एक क्रॉस ब्राउज़र (cross-browser) और बहुत बढ़िया (awesome) सिर्फ CSS से बना (CSS-only) ड्राप डाउन मेगा मेनू (drop-down mega menu) कैसे बनाते हैं.

पद 1: नेविगेशन बार (Navigation Bar) को बनाना

आईये एक बुनियादी (basic) मेनू से शुरू करें, जो की एक unordered लिस्ट से बनाया गया हो और उसमे कुछ बुनियादी css की स्टाइलिंग हो.

मेनू (Menu) का कंटेनर (Container) बनाना

अब हम बुनयादी CSS की स्टाइलिंग लागू करेंगे. मेनू कंटेनर के लिए, हम निश्चित width तय करेंगे जिसे की हम बांये (left) और दाएं (right) मार्जिन (margin) की सेटिंग "auto" करके मध्य (center) में करेंगे.

आईये अब हम जाने की CSS3 के फीचर्स का प्रयोग करके हम कैसे इसे सुधार सकते हैं. हमे webkit पर आधारित browsers (जैसे की safari) और Mozilla पर आधारित browsers (जैसे की Firefox) पर अलग अलग वाक्य रचना (syntax) की जरूरत है.

Rounded किनारो के लिए, वाक्य रचना (syntax) होगी:

पृष्ठभूमि (background) के लिए, हम gradients का प्रयोग करेंगे और एक फालबैक रंग (fallback color) पुराने browsers के लिए देंगे. स्थिरता बनाये रखने के लिए जब रंगो का चुनाव करें, तो एक बहुत ही जबरदस्त टूल है Facade जो की मूल रंग (basic color) की हलकी (lighter) और गाड़ी (darker) रंगत (tone) को चुनने में आपकी मदद करता है.

पहली लाइन एक सामान्य सा पृस्ठभूमि का रंग (background color) लागू (apply) करता है (पुराने browsers के लिए); दूसरी और तीसरी लाइन ऊपर से नीचे की तरफ दो रंग #0272a7 और #013953 का ग्रेडिएंट (gradient) बनाती हैं.

अब हम गाड़ा बॉर्डर (dark border) जोड़ सकते हैं और डिज़ाइन को "box-shadow" के साथ "fake" इनसेट बॉर्डर (inset border) बनाकर चमका (polish कर) सकते हैं. सभी अनुकूल browsers में syntax एक जैसा है: पहला मान (value) हॉरिजॉन्टल ओफ़्सेट (horizontal offset) का है, दूसरा वर्टीकल ओफ़्सेट (vertical offset) का, तीसरा blur radius (छोटा मान (small value) इसे तेज (sharper) बना देगा; हमारे उदाहरण में यह 1 पिक्सेल का है) का होता है. हमने सभी offsets में 0 मान स्थापित कर लिया है इसलिए blur का मान (value) सामान रूप से हल्का बॉर्डर (light border) बनाएगा: 

यह #menu कंटेनर के अंतिम CSS कोड हैं:

मेनू के आइटम्स को स्टाइल देना

हम सभी मेनू आइटम्स को बांयी (left) ओर पंक्तिबद्ध (aligned) करने और उन्हें margin-right (hover की स्थिति में padding देना अनिवार्य है) से जगह बनाने से शुरू करेंगे. 

hover तथा ड्राप डाउन (drop down) की स्थिति होने पर, मैंने पृष्ठभूमि (background) के लिए भूरे (brown) रंग की स्कीम (scheme) चुनी है.

fallback होने पर रंग हल्का भूरा (#F4F4F4) होगा और gradient रंग ऊपर (#F4F4F4) से नीचे (#EEEEEE) की ओर लागु होगा. ऊपर के कोने गोलाई (rounded) में दिए जायेंगे क्योंकि हमारा ड्राप डाउन (drop down) menu आइटम्स के एकदम नीचे लगा हुआ है.

यहाँ बांयी और दायीं (left and right) padding थोड़ी सी कम है क्योंकि हमारे पास 1 पिक्सेल का बॉर्डर है जो होवर (hover) होने की स्थिति में नजर आता है. यदि हम एक सी padding रखते हैं, Menu आइटम्स माउस hover पर बाईं (left) और दायीं (right) तरफ बॉर्डर्स जुड़ने की वजह से दो पिक्सेल्स दायीं (right) ओर खिसक जाएंगे इससे बचने के लिए, हम दोनों तरफ से 1 पिक्सेल padding को हटा देंगे, तो हमारे पास 10 की जगह 9 पिक्सेल्स होंगे.

इसके बाद, हम सिर्फ ऊपर की ओर गोल किनारे जोड़ते हैं तो ड्राप डाउन (drop down) पैरेंट मेनू आइटम (parent menu item) के नीचे पूरी तरह से चिपक जायेगा.

यह मेनू आइटम्स पर होवर (hover) होने वाली अंतिम CSS है:

links के लिए, हम आसान से syntax का प्रयोग करके एक अच्छी सी टेक्स्ट शैडो (text shadow) देंगे: पहला और दूसरा मान शैडो के offset का horizontal और vertical मान होगा (हमारे उदाहरण में 1 पिक्सेल), तीसरा blur के लिए (यह भी 1 पिक्सेल) और इसके बाद हमारे पास (काला) रंग होगा:

यह links के लिए अंतिम CSS है:

माउस के होवर होने पर, क्योंकि पृष्ठभूमि (background) भूरे रंग (grey color) की है, हम links के लिए गाड़ा रंग (#161616) प्रयोग करेंगे और टेक्स्ट शैडो (text shadow) के लिए सफ़ेद रंग का:

अंततः, हमें एक सरल सा तीर का निशान (arrow) पृष्ठ्भूमि (background) में दिखा कर यह दर्शाने का एक तरीका चाहिए की ड्राप डाउन मेनू (drop down menu) है की नहीं. यह padding का प्रयोग करके दायीं (right) ओर स्थापित होगा और टॉप मार्जिन (top margin) इसे सही तरीके से align करेगा. hover होने पर इसका टॉप मार्जिन (top margin) 8 की बजाय 7 पिक्सेल्स हो जायेगा क्योंकि हमें mouse hover होने पर हमें एक अतिरिक्त बॉर्डर दिखाना है (नहीं तो, तीर का निशान (arrow) hover होने पर 1 पिक्सेल नीचे खिसक जायेगा):

यह हमारे मेनू कंटेनर (menu container) और लिंक्स (links) के लिए अंतिम कोड है; अभी के लिए सिर्फ "home" आइटम (item) के पास कोई ड्राप डाउन कंटेंट (drop down content) नहीं है:

और परिणाम है:

Building a CSS3 Mega Drop Down Menu

पद 2: Drop Down की कोडिंग

एक "क्लासिक" drop down menu में आम तौर पर lists होती है जो मूल (parent) list item में nested होती है और कुछ इस तरह दिखती है:

सामान्य संरचना

हमारे mega menu के लिए, nested list की बजाये, हम स्टैण्डर्ड DIVs का प्रयोग करेंगे, जो की किसी भी नेस्टेड लिस्ट की तरह ही कार्य करेगा.

यह drop down की एक बुनियादी संरचना होगी: इसके पीछे विचार है की किसी भी प्रकार की सामग्री, जैसे की पैराग्राफ्स, चित्र, custom lists या एक contact फॉर्म, columns में संगठित कर सके.

Drop Down कंटेनर

अलग अलग आकारो के कंटेनर्स  पुरे drop down सामग्री (content) को पकड़े रखेंगे. मैंने जितने columns को tags शामिल कर सकेंगे उसके अनुसार उसका नाम चुना है.

Drop downs को छिपाने के लिए, हम नकारात्मक बांया (left) मार्जिन absolute positioning के साथ प्रयोग करेंगे:

पृष्ठभूमि (background) का fallback रंग वही होगा जैसा की हमने menu के आइटम्स के लिए प्रयोग किया है. आधुनिक browsers (पैरेंट मेनू को gradient से मिलाने के लिए) ऊपर से #EEEEEE से शुरू होता हुआ और नीचे #BBBBBB पर समाप्त होता हुआ प्रदर्शित करेंगे.

हम फिर से गोल कोनो (round corner) का प्रयोग करेंगे, सिर्फ ऊपर के बांये (left) कोने को छोड़ कर:

इसकी व्याख्या करने के लिए, आईये देखें की यदि हम विवरण (detail) में ध्यान न दें तो यह कैसा नजर आएगा:

Building a CSS3 Mega Drop Down Menu

अब यह हमारा उदाहरण है:

Building a CSS3 Mega Drop Down Menu

जैसा की आप देख सकते हैं, Drop Down अपने पैरेंट मेनू आइटम के साथ अच्छे से चिपक गया है.

एक उत्तम Drop Down कंटेनर (container) को लेने के लिए, हमें हर एक की width का उल्लेख करना होगा:

और Drop Down को माउस होवर (mouse hover) होने पर दर्शाने के लिए, हम मात्र यह प्रयोग करेंगे:

Drop Down कंटेनर्स का प्रयोग करना

हमारी classes मेनू (menu) में जुड़ने के लिए तैयार है. हम इन में से हर एक 5-column layout से लेकर एक column Drop Down तक का प्रयोग करेंगे:

यह ऊपर दिए गए कोड का preview है:

Building a CSS3 Mega Drop Down Menu

पद 3: Drop Down कंटेनर के columns को बनाना

अब जबकि हमारे पास कंटेनर तैयार है, हम 960 ग्रिड सिस्टम के सिधान्तो के अनुसार, बड़े हुए आकारो के columns बनाएंगे.

Columns का प्रयोग करना

यह drop down का एक उदाहरण है जिसमे बाहर सारे columns शामिल है. इस उदाहरण में, सभी प्रकार के columns का प्रयोग करते हुए हमारे पास अलग अलग संयोजन (combinations) हैं:

-Code का preview

Building a CSS3 Mega Drop Down Menu

पद 4: दायीं (right) ओर पंक्तिबद्ध (align) करना

अब, आईये देखें की हम कैसे अपने मेनू और drop down की सामग्री (content) को navigation bar के दाएं किनारे (right edge) पर लगा सकते हैं; न सिर्फ मेनू आइटम, पर drop down कंटेनर (container) में भी बदलाव होना चाहिए.

इसे पूरा करने की लिए, हम पैरेंट लिस्ट आइटम में एक नयी क्लास जिसका नाम .menu_right होगा को जोड़ेंगे, इसके लिए हम दायीं (right) ओर के margin को रीसेट करेंगे और इसको दायीं (right) ओर float कर देंगे:

अगला, आईये drop down को देखें पिछले CSS कोड में, सभी किनारो को गोल किया गया था सिर्फ ऊपर के बाएं वाले किनारे को छोड़ कर, पैरेंट मेनू आइटम की पृष्ठभूमि (background) को मैच करने के लिए. अब हम चाहते हैं की यह drop down पैरेंट मेनू आइटम के दाएं (right) किनारे (edge) पर चिपक जाये. इसलिए, हम border-radius की वैल्यू को एक नयी class जिसका नाम .align_right है के साथ overwrite कर देंगे, और ऊपर के दाएं किनारे (top-right corner) को 0 सेट कर देंगे.

अंतिम महत्वपुर्ण बात, हम drop down को दायीं (right) ओर लगाना चाहते हैं; इसलिए हम अपनी नयी class का प्रयोग करेंगे, उसके बाद इसे दायीं (right) ओर चिपकाएंगे:

अब यह मेनू में प्रयोग किये जाने योग्य है:

और ऊपर के कोड का एक छोटा सा प्रीव्यू:

Building a CSS3 Mega Drop Down Menu

पद 5: कंटेंट को जोड़ना और स्टाइल देना

क्योंकि अब हमारी पूरी संरचना (structure) तैयार है, अब हम जितनी चाहे उतनी सामग्री (content) डाल सकते हैं: टेक्स्ट, लिस्ट्स, इमेज, आदि.

सामान्य स्टाइल लगाना

आईये पैराग्राफ और हैडिंग को सामान्य स्टाइल देने से शुरू करें

हम drop down के अंदर links में एक अच्छा सा नीला रंग लगा सकते हैं.

Lists के स्टाइल लगाना

आईये हमारी Lists को सुधारें; हमे कुछ स्टाइल्स को रीसेट करना पड़ेगा जैसे की बैकग्राउंड का या borders का रंग जो की नेविगेशन बार में प्रयोग किये जा रहे हैं:

Images को स्टाइल देना

और बायीं (left) ओर इमेज (image) के साथ पैराग्राफ को बनाना

टेक्स्ट बॉक्सेस (Text Boxes)

कुछ सामग्री (content) को हाईलाइट करने के लिए, यह एक गोल किनारो (rounded corners) और सूक्ष्म इनसेट शैडो (subtle inset shadow) के साथ डार्क बॉक्स का एक उदाहरण है 

Lists को restyle करना

और समाप्त करने के लिए, यह हमारी लिस्ट को स्टाइल देने का एक अलग तरीका है, एक बार फिर, कुछ CSS3 का प्रयोग करते हुए:

पद 6: ब्राउज़र Compatibility को और IE6 को संभालना

सभी ब्राउज़र non-anchor टैग्स पर होवर को सँभालते (handle) हैं. . . इंटरनेट एक्स्प्लोरर 6 को छोड़ के; तो हमारा Mega Menu अभी भी पुराने ब्राउज़र के साथ काम नहीं करेगा. Behavior फाइल जो इस कार्यक्षमता (functionality) को जोड़ती है, का धन्यवाद की हम इस समस्या को हल कर सकते हैं  आप इसे यहाँ प्राप्त कर सकते हैं, और सिर्फ IE6 को लक्ष्य में रखते हुए कंडीशनल कमैंट्स (conditional comments) का प्रयोग कर सकते हैं; इससे अधिक स्पष्टीकरण CSS-Tricks के इस आर्टिकल के माध्यम से प्राप्त किया जा सकता है.

IE6 को लक्ष्य बनाने के लिए, हम निम्नलिखित कोड का प्रयोग करेंगे :

मैंने इस टुटोरिअल में कुछ PNG फाइल्स का प्रयोग किया है, और, जैसा की सभी जानते हैं, IE6 पारदर्शिता (transparency) को सपोर्ट नहीं करता तो हमारे पास अलग उपाय है  :

मैं इसे आपकी जरूरत के अनुसार आप को खुद चुनने दूंगा. अब, आईये पुरे कार्य करते उदाहरण (working example) की समीक्षा (review) करें.

अंतिम उदाहरण

HTML का हिस्सा

CSS का हिस्सा

दिलचस्प और प्रासंगिक (Relevant) लिंक्स

निष्कर्ष

मुझे उम्मीद है की मेगा menus को बनाने के इस टुटोरिअल का आपने आनंद लिया होगा. साथ साथ चलने का धन्यवाद

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.