फ़्रंटेंड डेवलपर संदर्भ: क्षैतिज नेविगेशन पैनलों के दृश्य

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

यह लेख शुरुआती कोडरों पर अधिक लक्षित है, लेकिन शायद अनुभवी पेशेवर भी इसमें कुछ नया पाएंगे या इसे संदर्भ के रूप में संदर्भित करेंगे।
इस विषय को इस प्रकार संरचित किया गया है: पहला, कार्य सामने रखा गया है - आवश्यक नेविगेशन ब्लॉक के प्रकार का वर्णन किया गया है, फिर तकनीकों पर विचार किया जाता है जो आपको सिर्फ ऐसा नेविगेशन बनाने की अनुमति देते हैं।
यह समझा जाता है कि शैलियाँ शब्दशः सही मेनू संरचना के अंतर्गत लिखी गई हैं, जो कुछ इस तरह दिखाई देती है:






  


एचटीएमएल 5 के अलावा अन्य सिद्धांतों के लिए बनाते समय, हम इसी तत्व के साथ नव तत्व को छोड़ देते हैं या बदल देते हैं।

ठीक है, चलो शुरू हो जाओ!

मेनू आइटम दाईं / बाईं ओर स्थित हैं

यह खंड उन नेविगेशन ब्लॉकों का वर्णन करता है जिनमें तत्वों को दाईं / बाईं ओर रखा जाता है। ऐसे ब्लॉकों के लेआउट के लिए, स्थिति के आधार पर, आप कई तरीकों का उपयोग कर सकते हैं:

1. प्रदर्शन: इनलाइन;
2. फ्लोट: बाएं / दाएं;
3. प्रदर्शन: इनलाइन-ब्लॉक।

प्रदर्शन: इनलाइन

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




कैसे किया जाता है
CSS में झूठे तत्वों के लिए, आपको प्रदर्शन सेट करने की आवश्यकता है: इनलाइन संपत्ति। वैसे, यह उन मार्करों को भी हटा देगा जो इस प्रकार के अधिकांश मेनू में अनावश्यक हैं, क्योंकि वे अतिरिक्त ब्लॉकों में हैं जो प्रदर्शन के साथ तत्वों में निहित हैं: सूची-आइटम, लेकिन इनलाइन गायब हैं।
उल के लिए, पाठ-संरेखित संपत्ति को क्रमशः दाएं या बाएं सेट करें।

नोट

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

फ्लोट: बाएं / दाएं

कब करें आवेदन
जब आपको उन तत्वों के साथ एक मेनू बनाने की आवश्यकता होती है जिनमें पैडिंग और / या एक निश्चित ऊंचाई / चौड़ाई होती है:




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

नोट

• यह .clearfix class देकर या स्पष्ट के साथ एक तत्व रखकर उल्टा "साफ" करना आवश्यक है: इसके अंत में दोनों, अन्यथा उल में शून्य की ऊंचाई होगी; "सफाई" फ्लोट के अन्य तरीकों के बारे में यहां पढ़ा जा सकता है ;
• फ्लोट्स के साथ एक दिलचस्प मेनू का एक उदाहरण: html5guy ।

प्रदर्शन: इनलाइन-ब्लॉक

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

कैसे किया जाता है
सेट प्रदर्शन: इन-ब्लॉक टू ली एलिमेंट्स। खैर, IE7 के लिए (यदि आप इसका समर्थन करते हैं), हम लिखते हैं * प्रदर्शन: इनलाइन; * ज़ूम: 1।

बाईं और दाईं ओर नेविगेशन ब्लॉक के संबंध में सममित

यह खंड सममित रूप से स्थित नेविगेशन ब्लॉकों का वर्णन करता है। ऐसे मेनू के कई प्रकार हैं; उनमें से प्रत्येक की अपनी लेआउट विधि है:

1. मेनू आइटम केंद्रित हैं;
2. मेनू आइटम समान रूप से पूरी चौड़ाई में वितरित किए जाते हैं, तत्वों के बीच एक अंतर होता है;
3. मेनू आइटम पूरे चौड़ाई पर समान रूप से वितरित किए जाते हैं, तत्व पूरी चौड़ाई को उल्टा भर देते हैं।

मेनू आइटम केंद्रित हैं

कब करें आवेदन
मेनू केंद्र में स्थित है:






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

नोट
मुझे खुद को दोहराने दें: कभी-कभी इनलाइन और इनलाइन-ब्लॉक-तत्वों के बीच अंतराल को दूर करना आवश्यक हो जाता है; इस समस्या को हल करने के कई तरीके यहां देखे जा सकते हैं ।

मेनू आइटम पूरे चौड़ाई में समान रूप से वितरित किए जाते हैं, तत्वों के बीच एक अंतर होता है

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






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

नोट
याद रखें, पिछले प्रकार के मेनू में, हमने इनलाइन और इनलाइन-ब्लॉक में प्रदर्शित प्रॉपर्टी के तत्वों के बीच रिक्त स्थान को हटा दिया? तो, इस मामले में ऐसा करना बिल्कुल असंभव है - ब्राउज़र को मेनू आइटम के बीच अंतराल की आवश्यकता होती है। वैसे, यदि आप कुछ तत्वों के बीच रिक्त स्थान को हटाते हैं, तो आप बटन ( JSFiddle ) को समूहित कर सकते हैं:

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

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




कैसे किया जाता है
इस समस्या को हल करते समय, तालिकाओं के साथ मेनू बनाने का प्रलोभन होता है; लेकिन हम दस्तावेज़ के शब्दार्थ का उल्लंघन नहीं करेंगे, है ना? इसलिए, हम डिस्प्ले का उपयोग करते हैं: ली के लिए टेबल-सेल और डिस्प्ले: उल के लिए टेबल; फिर उल के लिए चौड़ाई निर्धारित करें
यदि आपको पुराने ब्राउज़रों के लिए समर्थन की आवश्यकता है, तो हम एक पॉलीफ़िल स्क्रिप्ट का उपयोग करते हैं जो IE6 और IE7 के लिए तालिकाओं के साथ ऐसे ब्लॉक की जगह लेती है या अन्य तरीकों से फॉलबैक का आयोजन करती है।

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

परिणाम

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