CSS का उपयोग करके रबर रिस्पॉन्सिव मेनू कैसे बनाएं? रिबन पर सुंदर पूर्ण-चौड़ाई वाला क्षैतिज मेनू अनुकूली मेनू

शुभ दोपहर

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

आज मैं आपको दिखाना चाहूंगा कि ऐसा मेनू कैसे बनाया जाता है।

तो हमारा मेनू इस प्रकार होगा:

यह पूरी चौड़ाई तक फैला हुआ है और ऊपर से मँडराने पर अलग दिखता है। मेनू किनारों पर गोल है.

एचटीएमएल मार्कअप

घर

दिलचस्प खबर

एक और मेनू आइटम!

मेनू को पूरी चौड़ाई में बनाने के लिए, मैंने 100% चौड़ाई वाली तालिकाओं का उपयोग किया। प्रत्येक टेबल में है डिवमेनू आइटम कंटेनर. इस पर निर्भर करता है कि पहला, आखिरी या मध्यवर्ती मेनू आइटम है या नहीं डिव-y को ​​उपयुक्त वर्ग सौंपा गया है।

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

कक्षा सक्रियचयनित मेनू आइटम के लिए ज़िम्मेदार है और उसे हाइलाइट करता है।

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

सीएसएस नियम

सबसे पहले, आइए मेनू के सामान्य प्रदर्शन के लिए शैलियाँ सेट करें:

मेनू_कंटेनर (पैडिंग-टॉप: 40px; चौड़ाई: 100%; ऊंचाई: 47px; बॉर्डर-स्पेसिंग: 0px; ) .menu_container td (वर्टिकल-एलाइन: मिडिल; /* वर्टिकल अलाइनमेंट */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( चौड़ाई: 100%; ऊँचाई: 47px; सीमा: 1px ठोस #dadbda; स्थिति: सापेक्ष; सीमा-बाएँ: कोई नहीं); 150px; पैडिंग-लेफ्ट: 4px; .td.inner_table_title (पैडिंग-टॉप: 4px; फॉन्ट-वेट: बोल्ड; ) .td.inner_table_img (चौड़ाई: 40px!महत्वपूर्ण; ) .inner_table_menu (ऊंचाई: 100%; पैडिंग: 0px ; ऊर्ध्वाधर-संरेखण: मध्य; सीमा: कोई नहीं; पाठ-संरेखित करें: बाएँ; .inner_table_title (पैडिंग-बाएँ: 10px; पाठ-रूपांतरण: अपरकेस; पंक्ति-ऊँचाई: 13px; .inner_table_menu td.inner_table_img (चौड़ाई: 30px!महत्वपूर्ण; ऊंचाई: 30px!महत्वपूर्ण; पैडिंग-बाएं: 15px; )

सुंदरता के लिए, आइए मेनू के किनारों पर कोनों को गोल करें:

फर्स्ट_पॉइंट_मेनू ( -वेबकिट-बॉर्डर-टॉप-लेफ्ट-रेडियस: 5px; -वेबकिट-बॉर्डर-बॉटम-लेफ्ट-रेडियस: 5px; -moz-बॉर्डर-रेडियस-टॉपलेफ्ट: 5px; -moz-बॉर्डर-रेडियस-बॉटमलेफ्ट: 5px; बॉर्डर-टॉप-लेफ्ट-रेडियस: 5px; बॉर्डर-राइट: 1px सॉलिड #dadbda; (-वेबकिट-बॉर्डर-टॉप-राइट-रेडियस: 5px; -वेबकिट-बॉर्डर - निचला-दायाँ-त्रिज्या: 5px; -moz-सीमा-त्रिज्या-ऊपरी दाएँ: 5px;

अब हमारे मेनू का स्वरूप और भी सुंदर हो गया है:

अब तक, पहले बिंदु पर बाईं सीमा नहीं है। हम इसे थोड़ी देर बाद ठीक कर देंगे.

अब मेनू के लिए होवर प्रभाव जोड़ें।

मध्य_बिंदु_मेनू:होवर, .अंतिम_बिंदु_मेनू:होवर, .पहला_बिंदु_मेनू:होवर, .मध्य_बिंदु_मेनू.सक्रिय, .अंतिम_बिंदु_मेनू.सक्रिय, .पहला_बिंदु_मेनू.सक्रिय, .मध्य_बिंदु_मेनू.सक्रिय (पृष्ठभूमि-रंग: #CAE285; पृष्ठभूमि-छवि: -मोज़-रैखिक- ग्रेडिएंट(शीर्ष, #CAE285, #9FCB56); -वेबकिट-ग्रेडिएंट(रैखिक, 0 0, 0 100%, से(#CAE285), से(#9FCB56)); #9एफसीबी56); पृष्ठभूमि-छवि: -ओ-रेखीय-ढाल(शीर्ष, #सीएई285, #9एफसीबी56); -रंग: #aec671 #9fbb62 #87ac4a; सीमा-बाएँ: कोई नहीं; z-सूचकांक: 5000; .first_point_menu:hover, .first_point_menu.active (सीमा: 1px ठोस #9FCB56; सीमा-रंग: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( बॉर्डर: 1px सॉलिड #dadbda; बॉर्डर-लेफ्ट: कोई नहीं; ) .last_point_menu:hover ( बॉर्डर: 1px सॉलिड #9FCB56; बॉर्डर-लेफ्ट: कोई नहीं; बॉर्डर-रंग: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (सीमा-बाएँ: कोई नहीं;)

अब हमारा मेनू बहुत अच्छा दिखता है, लेकिन अभी हमारे पास हाइलाइट किए गए मेनू आइटम के लिए सीमाएं नहीं हैं। आइए इसे ठीक करें!

/* पार्श्व सीमाओं के लिए शैलियाँ */ .borderLeftSecond, .borderRightSecond (प्रदर्शन: कोई नहीं; स्थिति: निरपेक्ष; चौड़ाई: 1px; ऊंचाई: 47px; पृष्ठभूमि-रंग: #9fbb62; शीर्ष: 0px; z-सूचकांक: 1000; ) /* सीमाओं के लिए पूर्ण ऑफसेट */ .borderLeftSecond (बाएं: 0px; ). पहला और आखिरी आइटम */ .first_point_menu.active .borderLeftSecond (डिस्प्ले: कोई नहीं; ) .last_point_menu.active .borderRightSecond (डिस्प्ले: कोई नहीं; ) .last_point_menu:hover .borderLeftSecond (डिस्प्ले: ब्लॉक; )

बस इतना ही!

हमें मूल ब्लॉक की पूरी चौड़ाई में फैला हुआ एक उत्कृष्ट मेनू मिला! जब आप माउस घुमाते हैं तो आइटम एक-दूसरे पर ओवरलैप नहीं होते हैं और लेआउट जंप नहीं करता है।

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

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

इसे कैसे क्रियान्वित करें?

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

हमारा समाधान

हमारी पेशकश HTML5 और CSS3 ज्ञान की ठोस नींव पर बनाई जाएगी।

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

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

नीचे वह कोड है जो रबर मेनू बनाने के उदाहरण के रूप में कार्य करता है:

एचटीएमएल

< ul> < li>< a href= "#" >घर < li>< a href= "#" >ब्लॉग < li>< a href= "#" >समाचार < li>< a href= "#" >लोकप्रिय < li>< a href= "#" >नई वस्तुएं

उल (पाठ-संरेखित करें: औचित्य सिद्ध करें; अतिप्रवाह: छिपा हुआ; /* विधि के दुष्प्रभावों को समाप्त करता है */ऊंचाई: 20px; /*अनावश्यक चीजों को भी खत्म करता है*/कर्सर: डिफ़ॉल्ट; /* कर्सर का प्रारंभिक आकार सेट करता है */मार्जिन: 50px 100px 0 100px; पृष्ठभूमि: #ईईई; पैडिंग: 5px; ) ली (प्रदर्शन: इनलाइन; /* मेनू आइटम को टेक्स्ट बनाता है */) ली ए ( डिस्प्ले: इनलाइन-ब्लॉक; /*मेनू में शब्द विराम हटाता है*/रंग: #444; ) ए: होवर (रंग: #ff0000; ) उल: के बाद ( /* विधि का परीक्षण करने के लिए दूसरी पंक्ति बनाना */सामग्री: "1" ; मार्जिन-बाएँ: 100%; ऊंचाई: 1px; ओवर फलो हिडेन; प्रदर्शन: इनलाइन-ब्लॉक; )

अच्छे पुराने इंटरनेट एक्सप्लोरर में काम करने के लिए, आपको अतिरिक्त रूप से सीएसएस में निम्नलिखित कोड जोड़ना होगा

ul ( z- इंडेक्स: एक्सप्रेशन(रनटाइम स्टाइल. zIndex = 1 , InsertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last (मार्जिन-बाएँ: 100%; ) * html ul (/* केवल ie6 की आवश्यकता है */ ऊँचाई: 30px;)

आवश्यक संपत्ति मान और कोड निर्दिष्ट करने के बाद, हमें यह रबर मेनू मिलता है:

विधि के नुकसान

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

यह किन ब्राउज़रों में काम करता है?

नमस्ते। मैंने बहुत लंबे समय से html/css कार्य के विषय पर पोस्ट नहीं लिखी है। हाल ही में मैंने एक नया लेआउट तैयार करना शुरू किया है और इस प्रक्रिया में मुझे एक दिलचस्प ट्रिक मिली जो आपको मेनू को लचीला बनाने की अनुमति देती है (आप इसमें नए आइटम जोड़ सकते हैं और आकार नहीं बढ़ेगा, लेकिन हमेशा 100% रहेगा) पैरेंट ब्लॉक). तो, आज हम CSS का उपयोग करके एक रबर मेनू लागू करेंगे।

यदि आप लेख पढ़ने में बहुत आलसी हैं, तो आप यह वीडियो देख सकते हैं। लेखक भी सब कुछ बहुत अच्छे से समझाता है:

सीएसएस के साथ रबर मेनू - चरण 1

पहला कदम हमेशा html मार्कअप होता है, इसके बिना हम कहाँ होंगे? लेकिन हमारे मामले में सब कुछ सरल होगा:

1. मेनू के लिए ब्लॉक रैपर
2. मेनू स्वयं, बुलेटेड सूची (उल टैग) के माध्यम से प्रदर्शित होता है
3. खैर, अंदर मेनू आइटम हैं, और तदनुसार, उनमें पहले से ही लिंक हैं

सब कुछ स्पष्ट है, यहाँ मेरा मार्कअप कोड है:

यह सब मानक दिखता है, जैसे:

अब हम हर चीज़ को वांछित रूप में रखेंगे, सीएसएस काम करने लगेगा।

चरण 2 - मूल शैलियाँ

इसके बाद, मैं रैपर ब्लॉक में शैलियाँ जोड़ूँगा। अर्थात्, मैं अधिकतम चौड़ाई 600 पिक्सेल पर सेट करूँगा (केवल स्क्रीनशॉट लेना आसान बनाने के लिए ताकि मेनू फिट हो जाए), और मैं ब्लॉक को केंद्र में भी रखूँगा।

लपेटना(
पृष्ठभूमि: #fff;
अधिकतम-चौड़ाई: 600px;
मार्जिन: 0 ऑटो;
}

चरण 3 - रबर लागू करें

अब आइए मेनू पर ही विचार करें। मैं इसमें से मार्कर हटा दूंगा (उल टैग), एक बैकग्राउंड लीनियर ग्रेडिएंट बनाऊंगा, और, सबसे महत्वपूर्ण बात, मेनू के लिए कंटेनर को टेबल पंक्ति की तरह व्यवहार करने के लिए डिस्प्ले: टेबल-रो प्रॉपर्टी का उपयोग करूंगा। आगे के हेरफेर के लिए ऐसा करना महत्वपूर्ण है।

आर-मेनू(
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, #b0d4e3 0%,#88bacf 100%);
प्रदर्शन: तालिका-पंक्ति;
सूची-शैली: कोई नहीं;
}

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

आर-मेनू(
लंबवत-संरेखित करें: नीचे;
प्रदर्शन: टेबल-सेल;
चौड़ाई: ऑटो;
पाठ-संरेखण: केंद्र;
ऊंचाई: 50px;
बॉर्डर-दाएँ: 1px ठोस #222;
}

• लंबवत-संरेखण: निचला - यह गुण आवश्यक है ताकि यदि मेनू आइटम में पाठ 2 पंक्तियाँ लेता है, तो यह समान रूप से प्रदर्शित हो। जब हम मेनू बनाते हैं, तो आप इस प्रॉपर्टी को हटा सकते हैं, ज़ूम इन कर सकते हैं ताकि आइटम संपीड़ित हो जाएं और टेक्स्ट दो पंक्तियों में चला जाए और आपको एक डिस्प्ले समस्या दिखाई देगी। संपत्ति लौटा दो सब ठीक हो जाएगा।
• डिस्प्ले: टेबल-सेल - चूंकि हम डिस्प्ले मेनू को ही टेबल पंक्ति के रूप में सेट करते हैं, इसलिए इसके आइटम को टेबल में सेल के रूप में प्रदर्शित करने के लिए सेट करना तर्कसंगत होगा। यह आवश्यक है।
• चौड़ाई: ऑटो - पैराग्राफ में पाठ की लंबाई के आधार पर चौड़ाई की गणना स्वचालित रूप से की जाएगी
• पाठ-संरेखण: केंद्र - यह केवल पाठ को अंदर केन्द्रित करने के लिए है
• ऊँचाई: 50px - ऊँचाई को 50 पिक्सेल पर सेट करें
• ठीक है, बॉर्डर-राइट सिर्फ दाईं ओर एक बॉर्डर है, वस्तुओं के लिए एक विभाजक

अब तक मेनू भद्दा लगता है, लेकिन कोई बात नहीं, अब इसे ध्यान में लाने का समय आ गया है।

आखिरी काम आइटम के अंदर लिंक को स्टाइल करना है। यहाँ मेरे पास यह कोड है:

आर-मेनू ली ए(
पाठ-सजावट: कोई नहीं;
चौड़ाई: 1000px;
ऊंचाई: 50px;
लंबवत-संरेखित करें: मध्य;
प्रदर्शन: टेबल-सेल;
रंग: #fff;
फ़ॉन्ट: सामान्य 14पिक्स वर्दाना;
}

और अब मेनू इस प्रकार दिखता है:

फिर से, मैं कुछ पंक्तियाँ समझाता हूँ:

• टेक्स्ट-सजावट गुण लिंक के लिए डिफ़ॉल्ट अंडरलाइनिंग को ओवरराइड करता है
• चौड़ाई: 1000px शायद सबसे महत्वपूर्ण रेखा है। आपको लिंक को लगभग इसी चौड़ाई पर सेट करने की आवश्यकता है, शायद कम, लेकिन निश्चित रूप से अधिकतम संभव मेनू आइटम से बड़ा। लिंक 1000 पिक्सेल चौड़े नहीं होंगे, क्योंकि चौड़ाई ली मेनू आइटम द्वारा सीमित होगी, जिसकी चौड़ाई ऑटो पर सेट है, लेकिन इससे यह सुनिश्चित करना संभव हो जाएगा कि मेनू में किसी भी संख्या में आइटम के लिए यह हमेशा 100 रहेगा। चौड़ाई का प्रतिशत.
• लंबवत-संरेखण: मध्य और प्रदर्शन: तालिका-सेल - पहला पाठ को केंद्र में लंबवत रूप से संरेखित करेगा, और दूसरा लिंक को कोशिकाओं के रूप में भी प्रदर्शित करेगा। दोनों संपत्तियों की जरूरत है.
• फ़ॉन्ट - ठीक है, यह फ़ॉन्ट के लिए सेटिंग्स का एक सेट मात्र है। इस आलेख में फ़ॉन्ट के लिए सीएसएस गुणों के बारे में पढ़ें।

चरण 4 (वैकल्पिक) आप अन्तरक्रियाशीलता जोड़ सकते हैं

उदाहरण के लिए, ताकि होवर करने पर मेनू आइटम का रंग बदल जाए। होवर छद्म-वर्ग का उपयोग करके इसे काफी सरलता से कार्यान्वित किया जा सकता है:

आर-मेनू ली: होवर(
पृष्ठभूमि-रंग: #6बीबीए70;
}

रबरयुक्तता के लिए मेनू का परीक्षण करना

बढ़िया, मेनू तैयार हैं, लेकिन हमने सबसे महत्वपूर्ण चीज़ की जाँच नहीं की है - यह कितना रबरयुक्त है, जैसा कि मैंने आपसे वादा किया था। खैर, मैं मेनू में 2 और आइटम जोड़ूंगा:

मेनू 600 पिक्सेल चौड़ा रहता है। 2 नई वस्तुओं को समायोजित करने के लिए शेष वस्तुओं को बस थोड़ा छोटा कर दिया गया था।

मैं एक और लंबा बिंदु जोड़ूंगा:

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

मैं मेनू को तीन आइटम तक कम कर दूंगा।

आइटम अधिक मुक्त हो गए हैं, लेकिन मेनू की चौड़ाई में कोई बदलाव नहीं आया है। तो हमने 100% रबर मेनू बनाया!

इसे कैसे अनुकूलित करें?

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

ठीक है, यदि आप किसी तरह मोबाइल उपकरणों या विस्तृत स्क्रीन पर मेनू को बदलना या सही करना चाहते हैं, तो मीडिया क्वेरीज़ आपकी मदद करेंगी! वेबसाइट निर्माण में शुभकामनाएँ!

क्षैतिज मेनूवेबसाइट अनुभागों की एक सूची है, इसलिए इसे तत्व के अंदर चिह्नित करना अधिक तर्कसंगत है

, और फिर इसके तत्वों पर CSS शैलियाँ लागू करें। वेब पेज पर इसकी स्थिति में स्पष्ट लाभ के कारण यह मेनू लेआउट सबसे आम है।

क्षैतिज मेनू कैसे बनाएं: लेआउट और डिज़ाइन उदाहरण

क्षैतिज मेनू के लिए HTML मार्कअप और बुनियादी शैलियाँ

डिफ़ॉल्ट रूप से, सभी सूची आइटम स्थित होते हैं खड़ी, कंटेनर तत्व की पूरी चौड़ाई पर कब्जा कर लेता है, जो बदले में इसके कंटेनर ब्लॉक की पूरी चौड़ाई पर कब्जा कर लेता है।

क्षैतिज नेविगेशन के लिए HTML मार्कअप

• मेनू आइटम
• मेनू आइटम
• मेनू आइटम
...

टैग के अंदर स्थित एक क्षैतिज मेनू को अतिरिक्त रूप से एक तत्व के अंदर रखा जा सकता है

और/या
...
. इसके लिए धन्यवाद, html मार्कअप को अर्थपूर्ण अर्थ दिया जाता है, और मेनू ब्लॉक को फ़ॉर्मेट करने के लिए एक अतिरिक्त अवसर भी प्रदान करता है।

इन्हें रखने के कई तरीके हैं क्षैतिज. सबसे पहले, आपको नेविगेशन तत्वों के लिए डिफ़ॉल्ट ब्राउज़र शैलियों को रीसेट करना होगा:

उल (सूची-शैली: कोई नहीं; /*सूची मार्कर हटाएं*/ मार्जिन: 0; /*1em के बराबर ऊपर और नीचे का मार्जिन हटाएं*/ पैडिंग-बाएं: 0; /*40px के बराबर बायां पैडिंग हटाएं*/ ) ए (पाठ-सजावट: कोई नहीं; /*लिंक पाठ की रेखांकितता हटाएं*/)

विधि 1. ली (प्रदर्शन: इनलाइन;)

सूची तत्वों को लोअरकेस में बनाना। परिणामस्वरूप, वे क्षैतिज रूप से स्थित होते हैं, उनके बीच दाईं ओर 0.4em का अंतर जोड़ा जाता है (फ़ॉन्ट आकार के सापेक्ष गणना की जाती है)। इसे हटाने के लिए, li li (मार्जिन-राइट: -4px;) के लिए एक नकारात्मक दायां मार्जिन जोड़ें। इसके बाद, हम लिंक को अपनी इच्छानुसार स्टाइल करते हैं।

विधि 2. ली (फ्लोट: बाएँ;)

सूची तत्वों को फ़्लोटिंग बनाना। परिणामस्वरूप, वे क्षैतिज रूप से स्थित हैं। कंटेनर ब्लॉक उल की ऊंचाई शून्य हो जाती है। इस समस्या को हल करने के लिए, हम ul में (overflow:hidden;) जोड़ते हैं, इसे विस्तारित करते हैं और इस प्रकार इसमें फ्लोटिंग तत्वों को शामिल करने की अनुमति देते हैं। लिंक के लिए, एक (डिस्प्ले: ब्लॉक;) जोड़ें और उन्हें अपनी इच्छानुसार स्टाइल करें।

विधि 3. ली (प्रदर्शन: इनलाइन-ब्लॉक;)

सूची तत्वों को इनलाइन-ब्लॉक बनाना। वे क्षैतिज रूप से स्थित हैं, दाईं ओर एक गैप बनता है, जैसा कि पहले मामले में था। लिंक के लिए, एक (डिस्प्ले: ब्लॉक;) जोड़ें और उन्हें अपनी इच्छानुसार स्टाइल करें।

विधि 4. उल (प्रदर्शन: फ्लेक्स;)

का उपयोग करके ul सूची को एक लचीला कंटेनर बनाना। परिणामस्वरूप, सूची तत्व क्षैतिज रूप से व्यवस्थित हो जाते हैं। हम लिंक के लिए एक (डिस्प्ले: ब्लॉक;) जोड़ते हैं और उन्हें इच्छानुसार स्टाइल करते हैं।

1. किसी लिंक पर होवर करने पर अंडरलाइन प्रभाव वाला अनुकूली मेनू

• काम
• के बारे में
• ब्लॉग
• संपर्क
@आयात यूआरएल ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .मेनू-मुख्य (सूची-शैली: कोई नहीं; मार्जिन: 40पीएक्स 0 5पीएक्स; पैडिंग: 25पीएक्स 0 5पीएक्स; टेक्स्ट-संरेखित करें: केंद्र; पृष्ठभूमि: सफेद; ) .मेनू-मुख्य ली (प्रदर्शन: इनलाइन-ब्लॉक;)।मेनू- मुख्य ली:बाद (सामग्री: "|"; रंग: #606060; डिस्प्ले: इनलाइन-ब्लॉक; वर्टिकल-एलाइन:टॉप; ) .मेनू-मुख्य ली:अंतिम-बाल:बाद (सामग्री: कोई नहीं;) .मेनू-मुख्य ए (पाठ-सजावट: कोई नहीं; फ़ॉन्ट-परिवार: "उबंटू कंडेंस्ड", सैन्स-सेरिफ़; अक्षर-रिक्ति: 2px; स्थिति: सापेक्ष; पैडिंग-बॉटम: 20px; मार्जिन: 0 34px 0 30px; फ़ॉन्ट-आकार: 17px; टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस; डिस्प्ले: इनलाइन-ब्लॉक; ट्रांज़िशन: कलर .2s; ) .मेनू-मेन ए:विज़िट (रंग: #9डी999डी;)। ) .मेनू-मुख्य ए:पहले, .मेनू-मुख्य ए:बाद (सामग्री: ""; स्थिति: पूर्ण; ऊंचाई: 4पीएक्स; शीर्ष: ऑटो; दाएं: 50%; नीचे: -5पीएक्स; बाएं: 50%; पृष्ठभूमि : #feb386; ट्रांज़िशन: .8s; ) .मेनू-मेन ए:होवर:पहले, .मेनू-मेन .वर्तमान:पहले (बाएं: 0;)। होवर:बाद में, .मेनू-मेन .वर्तमान:बाद में (दाएं: 0;) @मीडिया (अधिकतम-चौड़ाई: 550px) ( .मेनू-मुख्य (पैडिंग-टॉप: 0;).मेनू-मुख्य ली (प्रदर्शन: ब्लॉक; ) .मेनू-मुख्य ली:बाद में (सामग्री: कोई नहीं;)। मेनू-मुख्य ए (पैडिंग: 25px 0 20px; मार्जिन: 0 30px; ) )

2. विवाह वेबसाइट के लिए अनुकूली मेनू

@आयात यूआरएल ("https://fonts.googleapis.com/css?family=PT+Sans"); .टॉप-मेनू (स्थिति: सापेक्ष; पृष्ठभूमि: #fff; बॉक्स-छाया: इनसेट 0 0 10px #ccc; ) .टॉप-मेनू: पहले, .टॉप-मेनू: बाद (सामग्री: ""; प्रदर्शन: ब्लॉक; ऊंचाई : 1px; बॉर्डर-टॉप: 3px सॉलिड #575350; बॉर्डर-बॉटम: 2px; टॉप-मेनू: आफ्टर ( बॉर्डर-बॉटम: 3px सॉलिड #575350; बॉर्डर-टॉप: 1px सॉलिड # 575350; बॉक्स-छाया: 0 2पीएक्स 7पीएक्स #सीसीसी; मार्जिन-टॉप: 2पीएक्स; मेनू-मेन (सूची-शैली: कोई नहीं; पैडिंग: 0 30पीएक्स; मार्जिन: 0; फ़ॉन्ट-आकार: 18पीएक्स; टेक्स्ट-संरेखण: केंद्र; स्थिति: सापेक्ष; ) .मेनू-मुख्य: पहले, .मेनू-मुख्य: बाद (सामग्री: "\25सी8"; पंक्ति-ऊंचाई: 1; स्थिति: पूर्ण; शीर्ष: 50%; परिवर्तन: अनुवादवाई(-50%); (पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; मार्जिन: 2px 5px; पैडिंग: 6px 15px; फ़ॉन्ट-परिवार: "पीटी संस", बिना-सेरिफ़; फ़ॉन्ट-आकार: 16px; रंग: #777777; बॉर्डर-बॉटम : 1px ठोस पारदर्शी; संक्रमण: .3s रैखिक; ) .मेनू-मुख्य .वर्तमान, .मेनू-मुख्य ए: होवर (बॉर्डर-त्रिज्या: 3px; पृष्ठभूमि: #f3ece1; रंग: #313131; पाठ-छाया: 0 1px 0 #fff; सीमा-रंग: #c6c6c6; ) @मीडिया (अधिकतम-चौड़ाई: 500px) ( .मेनू-मुख्य ली (प्रदर्शन: ब्लॉक;))

3. स्कैलप्प्स के साथ अनुकूली मेनू

• काम
• के बारे में
• ब्लॉग
• संपर्क
@आयात यूआरएल ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .मेनू-मुख्य (सूची-शैली: कोई नहीं; पैडिंग: 0 30पीएक्स; मार्जिन: 0; फ़ॉन्ट-आकार: 18पीएक्स; पाठ-संरेखण: केंद्र; स्थिति: सापेक्ष; पृष्ठभूमि: सफेद;) .मेनू-मुख्य:बाद में (सामग्री: ""; स्थिति: पूर्ण; ऊँचाई: 20px; पृष्ठभूमि: सफ़ेद 0%, सफ़ेद 70%, rgba(255,255,255,0) 100%) 0 -10px; बैकग्राउंड-रिपीट: रिपीट-एक्स; ) .मेनू-मेन ली (डिस्प्ले: इनलाइन-ब्लॉक;) .मेनू-मेन ए (टेक्स्ट-डेकोरेशन: कोई नहीं; डिस्प्ले: इनलाइन-ब्लॉक; पैडिंग: 10पीएक्स 30पीएक्स; फॉन्ट-फैमिली: " पीटी सेन्स कैप्शन", सेन्स-सेरिफ़; संक्रमण: .3 एस रैखिक; -मुख्य ए: पहले, .मेनू-मुख्य ए: बाद (सामग्री: ""; स्थिति: पूर्ण; शीर्ष: कैल्क (50% - 3 पीएक्स); चौड़ाई: 6पीएक्स; सीमा-त्रिज्या: 50%; पृष्ठभूमि: #एफ58262; संक्रमण: .5एस आसानी से अंदर-बाहर; मेनू-मुख्य ए: पहले (बाएं: 5पीएक्स;) .मेनू-मुख्य ए :बाद (दाएं: 5px;) .मेनू-मुख्य ए. वर्तमान: पहले, .मेनू-मुख्य ए.वर्तमान: बाद में, .मेनू-मुख्य ए: होवर: पहले, .मेनू-मुख्य ए: होवर: बाद में (अस्पष्टता: 1;) .मेनू-मेन ए.करंट, .मेनू- मेन ए:होवर (रंग: #F58262;) @मीडिया(अधिकतम-चौड़ाई:680पीएक्स) ( .मेनू-मेन ली (डिस्प्ले: ब्लॉक;) )

4. रिबन पर अनुकूली मेनू

@आयात यूआरएल ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .टॉप-मेनू (मार्जिन: 0 60px; स्थिति: सापेक्ष; पृष्ठभूमि: #5A394E; बॉक्स-छाया: इनसेट 1px 0 0 rgba(255,255,255,.1), इनसेट -1px 0 0 rgba(255,255,255,.1), इनसेट 150px 0 150px -150px rgba(255,255,255,.12), इनसेट -150px 0 150px -150px rgba(255,255,255,.12) .टॉप-मेनू: पहले, .टॉप-मेनू: बाद ( सामग्री: ""; स्थिति: पूर्ण ; z -सूचकांक: 2; चौड़ाई: 100%; ऊंचाई: 3पीएक्स; ) .शीर्ष-मेनू:बाद में (नीचे: 0; सीमा-शीर्ष: 1पीएक्स धराशायी आरजीबीए(255,255,255,.2); ) .मेनू-मुख्य (सूची-शैली: कोई नहीं; पैडिंग: 0; मार्जिन: 0; मेनू-मुख्य: पहले, .मेनू-मुख्य: बाद (सामग्री: ""; स्थिति: निरपेक्ष; ऊंचाई: 0; शीर्ष: 8px; बॉर्डर-टॉप: 18px सॉलिड #5A394E; ट्रांसफॉर्म: रोटेट (360deg: -1); मेनू-मेन: पहले (बाएं: -30px; बॉर्डर-लेफ्ट)। : 12px ठोस आरजीबीए(255, 255, 255, 0); ) .मेनू-मेन ली (डिस्प्ले: इनलाइन-ब्लॉक; मार्जिन-राइट: -4पीएक्स; ) .मेनू-मेन ए (टेक्स्ट-डेकोरेशन: कोई नहीं; डिस्प्ले: इनलाइन-ब्लॉक; पैडिंग: 15पीएक्स 30पीएक्स; फॉन्ट-फैमिली: "पीटी सैंस कैप्शन", सैंस-सेरिफ़; रंग: सफेद; संक्रमण: .3s रैखिक; ) .मेनू-मुख्य ए.वर्तमान, .मेनू-मुख्य ए: होवर (पृष्ठभूमि: आरजीबीए(0,0,0,.2);) @मीडिया (अधिकतम-चौड़ाई: 680पीएक्स) ( .टॉप-मेनू (मार्जिन: 0;) .मेनू-मुख्य ली (प्रदर्शन: ब्लॉक; मार्जिन-दाएं: 0; ) .मेनू-मुख्य: पहले, .मेनू-मुख्य: बाद में (सामग्री: कोई नहीं;) .मेनू-मुख्य ए (प्रदर्शन: ब्लॉक;))

5. बीच में एक लोगो के साथ उत्तरदायी मेनू

@आयात यूआरएल ("https://fonts.googleapis.com/css?family=Arimo"); .टॉप-मेनू (स्थिति: सापेक्ष; पृष्ठभूमि: आरजीबीए(34,34,34,.2); ) .मेनू-मुख्य (सूची-शैली: कोई नहीं; मार्जिन: 0; पैडिंग: 0; ) .मेनू-मुख्य:बाद में (सामग्री: ""; प्रदर्शन: तालिका; स्पष्ट: दोनों; ) .बाएं-आइटम (फ्लोट: बाएं;) .दाएं-आइटम (फ्लोट: दाएं;)। नेवबार-लोगो (स्थिति: निरपेक्ष; बाएं: 50%; शीर्ष) : 50%; परिवर्तन: अनुवाद (-50%,-50%); मेनू-मुख्य ए (पाठ-सजावट: कोई नहीं; प्रदर्शन: ब्लॉक; लाइन-ऊंचाई: 80px; पैडिंग: 0 20px; फ़ॉन्ट-आकार: 18px; अक्षर-अंतर: 2px; फ़ॉन्ट-परिवार: "एरिमो", सैन्स-सेरिफ़; रंग: .3s रैखिक; 0,0,.3);) @मीडिया (अधिकतम-चौड़ाई: 830px) (.मेनू-) मुख्य (पैडिंग-टॉप: 90पीएक्स; टेक्स्ट-एलाइन: सेंटर;) .नेवबार-लोगो (स्थिति: पूर्ण; बाएँ: 50%; शीर्ष: 10पीएक्स; ट्रांसफॉर्म: ट्रांसलेशनएक्स(-50%)) .मेनू-मेन ली (फ्लोट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; ) .मेनू-मुख्य ए (लाइन-ऊंचाई: सामान्य; पैडिंग: 20px 15px; फ़ॉन्ट-आकार: 16px; ) ) @मीडिया (अधिकतम-चौड़ाई: 630px) ( .मेनू-मुख्य ली ( प्रदर्शन क्षेत्र;) )

6. बायीं ओर लोगो के साथ रिस्पॉन्सिव मेनू

@आयात यूआरएल ("https://fonts.googleapis.com/css?family=Arimo"); .टॉप-मेनू (पृष्ठभूमि: आरजीबीए(255,255,255,.5); बॉक्स-छाया: 3पीएक्स 0 7पीएक्स आरजीबीए(0,0,0,.3); पैडिंग: 20पीएक्स; ) .टॉप-मेनू:बाद में (सामग्री: "" ; प्रदर्शन: तालिका; स्पष्ट: दोनों; ) .नेवबार-लोगो (प्रदर्शन: इनलाइन-ब्लॉक;) .मेनू-मुख्य (सूची-शैली: कोई नहीं; मार्जिन: 0; पैडिंग: 0; फ्लोट: दाएँ; ) .मेनू-मुख्य ली (प्रदर्शन: इनलाइन-ब्लॉक;)। मेनू-मुख्य ए (पाठ-सजावट: कोई नहीं; प्रदर्शन: ब्लॉक; स्थिति: सापेक्ष; लाइन-ऊंचाई: 61पीएक्स; पैडिंग-बाएं: 20पीएक्स; फ़ॉन्ट-आकार: 18पीएक्स; अक्षर-रिक्ति : 2px; फ़ॉन्ट-परिवार: "एरिमो", सैन्स-सेरिफ़; रंग: #F73E24; संक्रमण:.3s रैखिक; सामग्री: ""; चौड़ाई: 9px; ऊंचाई: 9px; स्थिति: पूर्ण बाएँ: 50%; परिवर्तन (45डिग्री) ट्रांसलेशनएक्स (6.5px); संक्रमण: .3s रैखिक; (अस्पष्टता: 1;) @मीडिया (अधिकतम-चौड़ाई: 660px) ( .मेनू-मुख्य (फ्लोट: कोई नहीं; पैडिंग-टॉप: 20px; ) .टॉप-मेनू (टेक्स्ट-एलाइन: सेंटर; पैडिंग: 20px 0 0 0; ) .मेनू-मेन ए (पैडिंग: 0 10px;) .मेनू-मेन ए: बिफोर (ट्रांसफॉर्म: रोटेट(45डिग्री) ट्रांसलेशनएक्स( -6px);) ) @मीडिया (अधिकतम-चौड़ाई: 600px) ( .मेनू-मेन ली (डिस्प्ले: ब्लॉक;) )