क्षैतिज सीएसएस मेनू कैसे लिखें. सीएसएस - लेआउट डिजाइनरों के लिए क्षैतिज मेनू। अनुभागों के साथ क्षैतिज मेनू

मेनू ली(फ्लोट:बाएं;)

हमारा पूरा मेनू क्षैतिज हो गया है.

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

मेनू ली ए (डिस्प्ले: ब्लॉक;/* ब्लॉक तत्व का चयन करें */ पैडिंग:12पीएक्स 20पीएक्स;/* आंतरिक प्रविष्टि का चयन करें */ टेक्स्ट-सजावट: कोई नहीं; /* निचली कुर्सी का चयन करें */ रंग:#एफएफएफ;/* रंग का चयन करें रंग को गहरा सेट करें */ पृष्ठभूमि:#444;/* पृष्ठभूमि को गहरा रंग दें */ फ़ॉन्ट:14px वर्डाना, सैन्स-सेरिफ़;/* फ़ॉन्ट का आकार और नाम सेट करें */ )

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

आइए देखें कि हमें क्या मिला है, आइए ब्राउज़र पक्ष को रीफ्रेश करें और हम वहां जाएं!:

जैसा कि आप देख रहे हैं, यह बुरा लग रहा है, हम कह सकते हैं कि, सिद्धांत रूप में, हमारा मेनू तैयार है। केवल एक चीज जो करने की ज़रूरत है वह है मँडराते समय प्रकाश सेट करना, लेकिन वस्तुओं के बीच विभाजकों के साथ एक सरल दिखने वाला मेनू भी बनाना।

आइए पृथक्करणों के साथ समाप्त करें:

मेनू ली (बॉर्डर-बाएं:1पीएक्स सॉलिड #666; ) .मेनू ली:फर्स्ट-चाइल्ड(बॉर्डर-बाएं:कोई नहीं;)

हम यहाँ क्या कर रहे हैं? लेकिन हम अपने बिंदुओं के लिए सब कुछ बहुत सरलता से निर्धारित करते हैं (

मुझे एक बार फिर आश्चर्य हुआ कि हमारे अंदर से क्या निकला:

मेरी राय में, अलग-अलग हिस्सों के साथ यह बहुत अच्छा है।

मेनू ली ए:होवर(पृष्ठभूमि:#888; )

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

मैं बहुत अच्छा हूं 🙂, मुझे आशा है कि आपको मेरे जैसा ही मेनू मिलेगा।

यह इस पाठ का अंत है, मुझे पहले से ही विश्वास है कि आप पैदा होंगे और अब आप जानते हैं कि शुद्ध HTML और CSS में एक सरल क्षैतिज मेनू कैसे बनाया जाता है। बेशक, हमने एक एकल-स्तरीय मेनू बनाया है, आंगन मेनू से थोड़ा अधिक जटिल होगा (एक सम्मिलित सूची के साथ), लेकिन यह पहले से ही एक और पाठ के लिए एक विषय है, जो मेरे पास है। अंदर आओ, मैं तुम्हें रेडियम दूँगा!

हम दिखाई देने वाले मेनू पर एक पाठ के साथ श्रृंखला जारी रखते हैं। क्षैतिज मेनू पर, जो आपके हाथों से सीएसएस पर पड़ता है।

यदि आपने यहां अचानक बर्बाद कर दिया है या आप मेनू के एक अलग कार्यान्वयन की तलाश कर रहे हैं, जो दिखाई देता है, तो राजा पिता के अनुभाग में जाएगा।

यह अनुभाग क्षैतिज मेनू का वर्णन करेगा जिसमें CSS और HTML शामिल हैं।

पेज नेविगेशन:

और हां, हमारा कार्य:

jQuery और जावास्क्रिप्ट के बिना, साथ ही स्टैक्ड टेबल के बिना सीएसएस सूची (उल ली सूचियों पर) के साथ एक क्षैतिज मेनू बनाएं

इससे पहले कि हम कोड लिखना शुरू करें, हमें मेनू के लिए एक HTML टेम्पलेट बनाना होगा।

इस तथ्य के संबंध में कि हमारे पास एक सार्वभौमिक मेनू है, मैं इसे यथासंभव वर्डप्रेस मेनू के समान बनाना चाहता हूं। मेरी राय में, यह सबसे सरल और सबसे सार्वभौमिक HTML मेनू कोड में से एक है। यह इस तरह दिख रहा है:

• गोलोव्ना
• हमारे बारे में
• हमारी सेवाएँ
  • हमारा #1 नौकर
  • हमारा नौकर नंबर 2
  • हमारा नौकर नंबर 3
  • हमारा नौकर नंबर 4
  • सेवा 5
• नोविनी
• संपर्क

जैसा कि आप कोड से देख सकते हैं, हमारा मेनू जो ड्रॉप डाउन होगा उसे ul और li सूचियों पर लागू किया जाएगा। सीएसएस शैलियों के बिना मेनू के लिए अक्ष इस तरह दिखता है:

आइए बस कहें, यह अंतिम सूची की तरह आकर्षक लगती है। आगे हमें इस मेनू को अतिरिक्त सीएसएस शैलियों से सजाने की जरूरत है।

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

नीचे गिरने वाले क्षैतिज मेनू के लिए, हमें निम्नलिखित शैलियों की आवश्यकता है:

#मेनू1 (स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; चौड़ाई:100%; ऊंचाई:ऑटो; जेड-इंडेक्स:10; ) #मेनू1 उल(स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; मार्जिन:0पीएक्स; पैडिंग:0पीएक्स; चौड़ाई:100 %;ऊंचाई:ऑटो;सूची-शैली:कोई नहीं;पृष्ठभूमि:#F3A601; मेनू1 उल ली(स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; फ्लोट:बाएं; चौड़ाई:ऑटो; ऊंचाई:ऑटो; ) #मेनू1 उल ली ए(डिस्प्ले: ब्लॉक; पैडिंग:9px 25px 0px 25px; फ़ॉन्ट-आकार:14px; फ़ॉन्ट-परिवार:एरियल, सेन्स-सेरिफ़;रंग:#ffffef;लाइन-ऊंचाई:1.3em;पाठ-सजावट:कोई नहीं;फ़ॉन्ट-वज़न:बोल्ड;पाठ -ट्रांसफॉर्म: अपरकेस; ऊंचाई: 36 पीएक्स; बॉक्स-साइजिंग: बॉर्डर-बॉक्स; ) #मेनू1 उल ली > ए:होवर, #मेनू1 उल ली:होवर > ए(बैकग्राउंड:#ईबीबीडी5बी; रंग:#2बी45ई0; )

यह अंत नहीं है, बल्कि मुख्य क्षैतिज मेनू के लिए सीएसएस का एक टुकड़ा मात्र है। आगे हम मेनू सूची के लिए शैलियाँ लिखेंगे:

#मेनू1 उल ली उल(स्थिति:पूर्ण; शीर्ष:36पीएक्स; बायां:0पीएक्स; डिस्प्ले:कोई नहीं; चौड़ाई:200पीएक्स; पृष्ठभूमि:#ईबीबीडी5बी; ) #मेनू1 उल ली:होवर उल(डिस्प्ले:ब्लॉक;) ड्रॉपडाउन तंत्र */ # मेनू1 उल ली उल ली(फ्लोट:कोई नहीं; चौड़ाई:100%; ) #मेनू1 उल ली उल ली(डिस्प्ले:ब्लॉक;टेक्स्ट-ट्रांसफॉर्म:कोई नहीं; 100% बॉक्स-साइजिंग:बॉर्डर-बॉक्स;बॉर्डर-टॉप:1पीएक्स सॉलिड # ffffff; पृष्ठभूमि:#FDDC96; रंग:#6572BC;

धुरी अब मूंछ है. एक पंक्ति में बिक्री जारी करने का तंत्र।

इस मेनू से त्वचा देखें:

छोटा 2 (क्षैतिज मेनू जो नीचे गिरता है)

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

आप में से अधिकांश ऐसे मेनू का उपयोग करके भ्रमित हो सकते हैं, जैसा कि मैंने ऊपर दिखाया है, अतीत से, और आंशिक रूप से आप सोच रहे हैं, मैं ऐसे मेनू के साथ नए लेआउट बनाना चाहता हूं।

मुझे यकीन है कि आपको बट में अधिक रुचि हो गई है। HTML अब अपरिवर्तित नहीं है, लेकिन CSS अक्ष पूरी तरह से बदल गया है। आप बस यहां सीएसएस कोड ले सकते हैं और इसे एनीमेशन में पेस्ट कर सकते हैं, या डेमो मोड में देख सकते हैं कि यह कैसे काम करता है।

#कंटेनर (चौड़ाई:1000पीएक्स; ऊंचाई:ऑटो; मार्जिन:0पीएक्स ऑटो; पैडिंग-टॉप:10पीएक्स; ) #मेनू1(स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; चौड़ाई:100%; ऊंचाई:ऑटो; जेड-इंडेक्स:10; ) #मेनू1 उल (स्थिति:सापेक्ष; प्रदर्शन:ब्लॉक; मार्जिन:0पीएक्स; पैडिंग:0पीएक्स; चौड़ाई:100%; ऊंचाई:ऑटो; सूची-शैली:कोई नहीं; पृष्ठभूमि:#एफ3ए601; ) #मेनू1 > उल(पाठ-संरेखण: औचित्य; फ़ॉन्ट-आकार: 1px; पंक्ति-ऊंचाई:1px; ) #मेनू1 > ul::बाद(प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:100%; ऊंचाई:0px; :सापेक्ष; प्रदर्शन:इनलाइन-ब्लॉक;चौड़ाई:ऑटो ;ऊंचाई:ऑटो;ऊर्ध्वाधर-संरेखण:शीर्ष;पाठ-संरेखण:बाएं; ) #मेनू1 :14पीएक्स;फ़ॉन्ट-परिवार:एरियल, सैन्स-सेरिफ़;रंग:#ffffef;रेखा-ऊंचाई:1.3ईएम;पाठ-सजावट:कोई नहीं ; फ़ॉन्ट-वजन: बोल्ड; टेक्स्ट-ट्रांसफॉर्म: अपरकेस; ऊंचाई: 36px; :बॉर्डर-बॉक्स; ) #मेनू1 उल ली > ए:होवर, #मेनू1 उल ली:होवर > ए(पृष्ठभूमि:#ईबीबीडी5बी; रंग:#2बी45ई0; ) #मेनू1 उल ली उल( :0पीएक्स; डिस्प्ले: कोई नहीं; चौड़ाई:ऑटो; पृष्ठभूमि:# EBBD5B; व्हाइट-स्पेस: अब्रैप; ) #मेनू1 उल ली:लास्ट-चाइल्ड उल(/*शेष आइटम दाएं किनारे से जुड़ा होगा*/बाएं:ऑटो; दाएं:0पीएक्स; ) ड्रॉपडाउन*/ #मेनू1 उल ली उल ली(डिस्प्ले:ब्लॉक; चौड़ाई:ऑटो; ) #मेनू1 उल ली उल ली(डिस्प्ले:ब्लॉक; टेक्स्ट-ट्रांसफॉर्म:कोई नहीं; ऊंचाई:ऑटो; बॉक्स-साइजिंग:बॉर्डर-बॉक्स;बॉर्डर-टॉप:1पीएक्स सॉलिड #एफएफएफएफ; ) #मेनू1 # एफडीडीसी96;रंग:#6572बीसी;

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

बहुत लंबे मेनू आइटम के लिए, यह विकल्प बहुत व्यावहारिक नहीं हो सकता है, क्योंकि बदबू के टुकड़े सीमाओं से परे फैल जाएंगे। इस शक्ति को प्राप्त करने के लिए, "व्हाइट-स्पेस: अब्रैप;" की शक्ति को जानना पर्याप्त है। चयनकर्ता #menu1 ul li ul पर और इसे चुनें।

नीचे आप एक डेमो देख सकते हैं या क्षैतिज मेनू के सप्ताहांत विकल्पों का आनंद ले सकते हैं:

डिवाइडर के बिना, मेनू इस तरह दिखता है। HTML में विवरण मैन्युअल रूप से जोड़े जा सकते हैं, लेकिन यदि आपके पास CMS है, उदाहरण के लिए वर्डप्रेस, तो उन्हें मैन्युअल रूप से जोड़ना बहुत आसान नहीं है।

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

ऐसी स्थितियाँ होती हैं जब लेआउट इतने चमत्कारी ढंग से बनाया जाता है कि jquery के बिना ऐसा करना असंभव है।

हमारा HTML कोड बहुत अधिक गायब है, लेकिन हम केवल jQuery लाइब्रेरी और वह फ़ाइल ही शामिल करते हैं जिसमें निम्नलिखित शामिल हैं:

तुरंत बाद।

एक बार जब आप समझ जाएं, तो आपको एक फ़ाइल बनानी होगी स्क्रिप्ट-मेनू-3.jsऔर वहां यह छोटा सा कोड डालें:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

ऐसे मेनू के लिए सीएसएस शैलियों को हटाने की जरूरत है, + इस पंक्ति की धुरी को अंत में रखें:

#menu1 ul li.razd(ऊंचाई:28px; चौड़ाई:1px; पृष्ठभूमि:#ffffff; मार्जिन-टॉप:4px;)

JQuery में डिवाइडर वाला एक क्षैतिज मेनू इस तरह दिखेगा:

आप इसे डेमो मोड में देख सकते हैं या नीचे क्षैतिज मेनू टेम्पलेट डाउनलोड कर सकते हैं:

ऐसे निर्णय के लाभ हैं:

• मेनू गतिशील रूप से तैयार किया गया है;
• तथापि विभाजक से बिंदु तक पहुंच;
• डिजाइन और भी खूबसूरत है.

एक बार जब आप उन पर होवर करते हैं तो बहुत सारे मेनू पॉप अप हो जाते हैं, उन्हें अकेले उपसमूहों में विभाजित करें:

मेरे मामले में, मैंने 3 स्तरों पर बड़ी संख्या में सीएसएस मेनू दिखाए हैं, और फिर मुझे लगता है कि यह पता लगाना मुश्किल नहीं होगा कि क्या करने की आवश्यकता है।

आरंभ करने के लिए, हमें अपने HTML में थोड़ा बदलाव करना होगा। लेवल 3 के लिए कुछ पंक्तियाँ होंगी:

• गोलोव्ना
• हमारे बारे में
• हमारी सेवाएँ
  • हमारा #1 नौकर
    • सेवा अनुपूरक 1
    • सेवा अनुपूरक 2
  • हमारा नौकर नंबर 2
    • सेवा अनुपूरक 3
    • सेवा अनुपूरक 4
  • हमारा नौकर नंबर 3
  • हमारा नौकर नंबर 4
  • सेवा 5
• नोविनी
• संपर्क
  • दिशा मानचित्र
    • कार्ड ऐड-ऑन
    • कार्ड 2 के लिए परिशिष्ट
  • कॉलर का आकार

#कंटेनर (चौड़ाई:1000पीएक्स; ऊंचाई:ऑटो; मार्जिन:0पीएक्स ऑटो; पैडिंग-टॉप:10पीएक्स; ) #मेनू1(स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; चौड़ाई:100%; ऊंचाई:ऑटो; जेड-इंडेक्स:10; ) #मेनू1 उल (स्थिति:सापेक्ष; प्रदर्शन:ब्लॉक; मार्जिन:0पीएक्स; पैडिंग:0पीएक्स; चौड़ाई:100%; ऊंचाई:ऑटो; सूची-शैली:कोई नहीं; पृष्ठभूमि:#एफ3ए601; ) #मेनू1 > उल(पाठ-संरेखण: औचित्य; फ़ॉन्ट-आकार: 1px; पंक्ति-ऊंचाई:1px; ) #मेनू1 > ul::बाद(प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:100%; ऊंचाई:0px; :सापेक्ष;प्रदर्शन:इनलाइन-ब्लॉक;चौड़ाई:ऑटो ;ऊंचाई:ऑटो;वर्टिकल-एलाइन:टॉप;टेक्स्ट-एलाइन:लेफ्ट; ) #menu1 ul li.razd(ऊंचाई:28px; चौड़ाई:1px; मार्जिन-टॉप:4px; ) #menu1 ul li a(डिस्प्ले:ब्लॉक; पैडिंग:9पीएक्स 45पीएक्स 0पीएक्स 45पीएक्स;एम;टेक्स्ट-डेकोरेशन:कोई नहीं;फॉन्ट-वेट:बोल्ड;टेक्स्ट-ट्रांसफॉर्म:अपरकेस;ऊंचाई:36पीएक्स;बॉक्स-साइजिंग:बॉर्डर-बॉक्स;) #मेनू1 उल ली> (बैकग्राउंड: #ईबीबीडी5बी ; रंग:#2बी45ई0; ) #मेनू1 उल ली उल(स्थिति:पूर्ण; शीर्ष:36पीएक्स; बायां:0पीएक्स; डिस्प्ले:कोई नहीं; चौड़ाई:ऑटो; पृष्ठभूमि:#ईबीबीडी5बी; सफेद-स्पेस:अब्रैप; ) #मेनू1 >उल > li:last-child > ul(/*अंतिम आइटम दाएँ किनारे से जुड़ा होगा*/ बाएँ:auto; दाएँ:0px; ) #menu1 ul li:hover > ul(display:block;)/*यह लाइन ड्रॉपडाउन तंत्र को लागू करती है*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li a(display : ब्लॉक; टेक्स्ट-ट्रांसफॉर्म: कोई नहीं; ऊंचाई: ऑटो; पैडिंग: 7px 45px; चौड़ाई: 100%; बॉर्डर-टॉप: 1px सॉलिड #ffffff; a( बैकग्राउंड: #FDDC96; रंग: # 6572BC; ) #menu1 ul li ul ली उल (शीर्ष: 0px; बाएँ: 100%; प्रदर्शन: कोई नहीं; पृष्ठभूमि: # fddc96; ) # मेनू 1 > उल > ली: अंतिम-बच्चा > उल उल (बाएँ: ऑटो; दाएँ: 100%;) # मेनू 1

JQuery के लिए फ़ाइलें सामने से कॉपी की जाती हैं। यदि आप विभाजकों को हटाना चाहते हैं, ताकि मेनू कम से कम थोड़ा और सुंदर दिखे। निःसंदेह, यह उनके बिना संभव है।

धुरी इस प्रकार निकली:
मैंने यह दिखाने के लिए एक में दो खालें बनाईं कि यह दाएं हाथ और बीच में कैसी दिखती है।

नीचे आप डेमो देख सकते हैं और उदाहरण डाउनलोड कर सकते हैं:

ट्रोची ओलिया शीर्षक में आया, एले प्रोकोटिट, स्मट कोड।

इसका सार एक क्षैतिज मेनू बनाना है जो पूर्ण चौड़ाई + समृद्धि पर गिरावट के साथ पूरी चौड़ाई पर पड़ता है।

मैं HTML कोड नहीं बदलूंगा, आप इसे सामने से ले सकते हैं। jQuery में विभाजन भी हटा दिए गए हैं।

केवल CSS को बदला जा सकता है:

#कंटेनर (चौड़ाई:1000पीएक्स; ऊंचाई:ऑटो; मार्जिन:0पीएक्स ऑटो; पैडिंग-टॉप:10पीएक्स; ) #मेनू1(स्थिति:सापेक्ष; डिस्प्ले:ब्लॉक; चौड़ाई:100%; ऊंचाई:ऑटो; जेड-इंडेक्स:10; ) #मेनू1 उल (स्थिति:सापेक्ष; प्रदर्शन:ब्लॉक; मार्जिन:0पीएक्स; पैडिंग:0पीएक्स; चौड़ाई:100%; ऊंचाई:ऑटो; सूची-शैली:कोई नहीं; पृष्ठभूमि:#एफ3ए601; ) #मेनू1 > उल(पाठ-संरेखण: औचित्य; फ़ॉन्ट-आकार: 1px; पंक्ति-ऊंचाई:1px; ) #मेनू1 > ul::बाद(प्रदर्शन:इनलाइन-ब्लॉक; चौड़ाई:100%; ऊंचाई:0px; :सापेक्ष; प्रदर्शन:इनलाइन-ब्लॉक;चौड़ाई:ऑटो ;ऊंचाई:ऑटो;वर्टिकल-एलाइन:टॉप;टेक्स्ट-एलाइन:लेफ्ट;) :28px;चौड़ाई:1px;बैकग्राउंड:#ffffff;मार्जिन-टॉप:4px; ) #मेनू1 उल ली ए(डिस्प्ले:ब्लॉक; पैडिंग:9पीएक्स 45पीएक्स सेरिफ;रंग:#एफएफएफएफ;लाइन-ऊंचाई:1.3ईएम;टेक्स्ट-डेकोरेशन:कोई नहीं;फॉन्ट-वेट:बोल्ड;टेक्स्ट-ट्रांसफॉर्म:अपरकेस;ऊंचाई:36पीएक्स ;बॉक्स-आकार: सीमा-बॉक्स; ) #मेनू1 उल ली > ए:होवर, #मेनू1 उल ली:होवर > ए(पृष्ठभूमि:#ईबीबीडी5बी; रंग:#2बी45ई0; ) #मेनू1 उल ली उल(स्थिति:पूर्ण; शीर्ष) :36px; बाएँ:0px; डिस्प्ले:कोई नहीं; चौड़ाई:100%; पृष्ठभूमि:#EBBD5B; ) #menu1 > ul > li > ul::after(स्पष्ट:दोनों; फ़्लोट:कोई नहीं; चौड़ाई:100%; ऊँचाई:0px ; सामग्री:" "; ; :ब्लॉक; चौड़ाई:30%; फ्लोट:बाएं; ) #मेनू1 उल ली उल ली ए( डिस्प्ले:ब्लॉक; - बॉक्स; रंग:#6572बीसी; ) #मेनू1 उल ली उल ली उल( शीर्ष :0px; बाएँ:100%; प्रदर्शन:कोई नहीं; पृष्ठभूमि:#fddc96; z-सूचकांक:15; ) #मेनू1 ब्लॉक;फ्लोट:कोई नहीं;चौड़ाई:100%;) #मेनू1 उल ली

मेनू इस प्रकार दिखेगा: एक बात - साइट में पर्याप्त जगह है, क्योंकि दाईं ओर अंतिम आइटम के प्रदर्शित होने के लिए कोई जगह नहीं है। इस समस्या को हल किया जा सकता है: nth-child, लेकिन मैं एक शहर शहर नहीं बनता।

क्षैतिज सामान मेनू का डेमो देखें:

जैसा कि आपने देखा होगा: नीचे की प्लेट भी पूरी चौड़ाई की है। धुरी कई ब्लॉकों के आसपास इसी तरह ढह जाती है।

मुझे आशा है कि मेरे लिए बस इतना ही है, हालाँकि मेरा बट अकेले ही आपके लिए उपयुक्त रहेगा। मैं आपके सम्मान के लिए धन्यवाद देता हूं.

यदि आपने पोस्ट को अच्छी तरह से पढ़ा है, लेकिन यह नहीं जानते कि सीएसएस पर आने वाला अपना खुद का क्षैतिज मेनू कैसे बनाएं, तो टिप्पणियों में अपने प्रश्न पूछें या तुरंत साइट खोजें।

इसके अलावा, मैं आपको अपने पिता के पेज https://site/vypadayushhee-menu/ से परिचित कराना चाहूंगा, जहां सभी एप्लिकेशन और विभिन्न प्रकार के मेनू एकत्र किए जाते हैं।

लेखक का नोट: मैं आपको वेबसाइट के बारे में हमारे ब्लॉग पर आमंत्रित करता हूं। यह नई विशिष्टताओं को समर्पित लेखों की एक श्रृंखला है और आज मैं आपको बताना चाहूंगा कि HTML5 में एक मेनू कैसे बनाया जाए और यह प्रक्रिया भाषा के पिछले संस्करणों से कैसे भिन्न है।

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

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

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

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

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

गोलोव्ना सेवाएं संपर्क विदगुकी

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

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

यहां हमें ब्लॉक तत्वों पर अपने बिंदुओं को फिर से बनाना होगा। जिसके लिए उन्हें शक्ति लिखना आवश्यक है:

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

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

अब आप उन्हें रजिस्ट्रेशन के नियम बता सकते हैं. ब्लॉकों में बहुत अधिक शक्ति होती है, लेकिन एक छोटे तरीके से, आपके पास बहुत अधिक शक्ति होती है। उदाहरण के लिए, मैंने निम्नलिखित जोड़ा:

a( पाठ-सजावट: कोई नहीं; रंग: #fff; पैडिंग: 5px; फ़ॉन्ट-आकार: 22px; प्रदर्शन: ब्लॉक; पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, rgba(96,108,136,1) 0%,rgba(63,76,107) ) ,1) 100%);चौड़ाई: 200px;पाठ-संरेखण: केंद्र)

मेनू त्वचा की तरह ही त्वचा स्थल का एक अज्ञात भाग है। मेनू (या नेविगेशन) आपको साइट के मुख्य अनुभागों के माध्यम से जल्दी से नेविगेट करने की अनुमति देता है, जो किताबों में जगह के समान है। समानता साइट मानचित्र (विभिन्न प्रकार के नेविगेशन) पर विशेष रूप से ध्यान देने योग्य है:

मेनू अलग दिख सकता है. शायद क्षैतिज

खड़ा

बैगेटरी

मेनू और भी अधिक विविध हो सकता है और इसे और भी अलग तरीकों से प्रस्तुत किया जा सकता है: टेबल, ब्लॉक, सरल प्रविष्टियाँ, शायद प्रविष्टियाँ
...आप कई "सावधान" तरीकों का अनुमान लगा सकते हैं और उनमें से अधिकांश ब्लॉक (टेबललेस) लेआउट के सिद्धांतों के अनुरूप हैं। पेशेवर हलकों में, मुझे लगता है कि यह महत्वपूर्ण है कि नेविगेशन अव्यवस्थित सूचियों पर आधारित हो।< >і< >.

समझाने वाली पहली बात यह है कि यह सोचना तर्कसंगत है: मेनू पॉसिलन (अनुभागों) से भरा है। और यदि आप न केवल सोचते हैं, बल्कि शब्दकोश को भी देखते हैं, उदाहरण के लिए, ओज़ेगोव:

यह स्पष्ट हो जाता है कि हम सही रास्ते पर हैं (उन लोगों के लिए जो भूल गए हैं, सिमेंटिक कोड तार्किक (परिवर्तन के पीछे) सही कोड से ठीक पहले है)।

अधिकारियों से मदद मांगते हुए, संदेह को कैसे सताया जाए। सूचियों के बारे में W3C:

• खराब
• अतिप्रवाह का आदेश देना
• मार्गदर्शन
• नियुक्ति

• क्रिसलर
• ऑडी
• बुगाटी

नेविगेशन (सूची-शैली: कोई नहीं; /* मार्करों को प्राथमिकता दी जाती है */ मार्जिन: 30px; ) .नेविगेशन ली (फ्लोट: बाएं; /* सूची आइटम एक पंक्ति में चुने गए हैं */ मार्जिन-दाएं: 15px; /* मेनू तक पहुंच आइटम आवश्यक है नाराज नहीं हुए */).नेविगेशन ली ए ( डिस्प्ले: ब्लॉक; टेक्स्ट-एलाइन: सेंटर; पैडिंग-टॉप: 100px; * बैकग्राउंड हाई और सेंटर्ड है */ बैकग्राउंड-रिपीट: नो-रिपीट; चौड़ाई : 200px;/* आयाम यह इंगित किया गया है कि चित्रों को पूर्ण रूप से प्रदर्शित किया जाना चाहिए */ ऊंचाई: 50px; अन्यथा ब्लॉक मॉडल की व्याख्या करता है */ ऊंचाई: 150px; ) .नेविगेशन .क्रिसलर ए (पृष्ठभूमि-छवि: /मेनू-ऑडी। jpg); ) .नेविगेशन .बुगाटी ए ( बैकग्राउंड-इमेज: यूआरएल(पाथ-टू/मेनू-बुगाटी.जेपीजी); ) .