भाषाएँ

यह एक अनुवाद है। इसमें त्रुटियां हो सकती हैं या यह अंग्रेजी संस्करण के संबंध में पुराना हो सकता हैं। लेखक: Maneesh Sharma (Hosting One Cent)

वेब स्टाइल्स शीट्स सीएसएस युक्तियाँ एवं चालाकियाँ

सभी युक्तियों का सूचकांक भी देखें ।

एक स्लाइडिंग मेनू

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

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

खुलासा को अधिक मनभावन बनाने के लिए, केवल 0.2 सेकंड का एक छोटा transition दाएं से मेनू को सुचारू रूप से स्लाइड करता है।

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

विवरण

हमारा मेनू सिर्फ एक यू एल सूची है और इस तरह दिखता है: 

<ul id=menu>
<li><a href="#sliding">एक स्लाइडिंग मेनू</a>
<li><a href="#details">डिटेल्स</a>
<li><a href="#a11n">एक्सेसिबिलिटी</a>
<li><a href="#misc">अज्ञात आकार के मेनू</a>
</ul>

नीचे स्टाइल शीट का आवश्यक हिस्सा है। स्पष्टीकरण के लिए पृष्ठ ‘Fixed menus’ देखें। संक्षिप्तता के लिए, हमने सीमा, शैडो और गोल कोनों को छोड़ दिया। आप इस पृष्ठ के स्रोत को देखकर लापता शैली के नियम देख सकते हैं। 

#menu {
  position: fixed;
  right: -8.5em;
  top: 50%;
  width: 8em;
  background: hsla(80, 90%, 40%, 0.7);
  color: white;
  margin: -3em 0 0 0;
  padding: 0.5em 0.5em 0.5em 2.5em;
}

पिछले निश्चित मेनू के साथ अंतर यह है कि 'सही' प्रॉपर्टी 0 नहीं है, लेकिन -8.5em है। जिसके कारण अधिकांश मेनू विंडो के बाहर है और इस प्रकार अदृश्य है। ध्यान दें कि पेडिंग सहित मेनू 11em चौड़ा (8em + 0.5em + 2.5em) है, इसलिए अभी भी 2.5em दृश्यमान है।

केवल एक चीज जो अब हमें जोड़ने की आवश्यकता है वह है 'दाएं' को 0 पर रीसेट करने का नियम जब मेनू ओवर होवर हो: 

#menu:hover { right: 0 }

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

#menu { transition: 0.2s }

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

एक्सेसिबिलिटी

दुर्भाग्य से, हमारे स्लाइडिंग मेनू में एक एक्सेसिबिलिटी की समस्या है: जब कोई पृष्ठ को केवल कीबोर्ड या टचस्क्रीन के बिना पृष्ठ पर नेविगेट करने का प्रयास करता है, तो मेनू को दृश्यमान बनाने का कोई तरीका नहीं है।

हम मेनू को स्लाइड करना चाहेंगे जब उसके किसी एक आइटम को कीबोर्ड फ़ोकस प्राप्त हो, लेकिन यह असंभव है। वर्तमान में (2017 में) कोई सीएसएस selector नहीं है जो एक तत्व का चयन करने में सक्षम हो जब उसके children में से किसी एक को फोकस मिलता है। (भविष्य में ऐसे selectors हो सकते हैं।) फिर भी, हम मेनू आइटम को स्वयं स्लाइड कर सकते हैं।

यह उतना सुंदर नहीं है, लेकिन यह काम करता है। कोशिश करें! टैब कुंजी को बार-बार पुश करें (या संस्करण 12 तक ctrl + (या version + version ओपेरा पर) इस पृष्ठ पर प्रत्येक लिंक को चुनने के लिए बारी-बारी से देखें और देखें कि मेनू आइटम एक बार में कैसे स्लाइड करते हैं।

यह जिस तरह से किया जाता है वहं है लिंक को अपेक्षाकृत स्थिति में बनाकर और उन्हें बाईं ओर ले जाने के लिए एक 'बाएं' प्रॉपर्टी जोड़कर होता है, जब उनका ध्यान केंद्रित होता है। हम उन्हें मेनू का बैकग्राउंड कलर भी देते हैं: 

#menu a {
  position: relative;
  left: 0;
}
#menu a:focus {
  left: -7em;
  background: hsla(80, 90%, 40%, 0.7);
}

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

#menu a { transition: 0.2s }

यह उस सहज transition के कारण है जिसे हम 'बाएं' को स्पष्ट रूप से 0 पर सेट करते हैं: डिफ़ॉल्ट मान 'auto' है, लेकिन 'बाएं' प्रॉपर्टी केवल संख्याओं के बीच एनिमेट कर सकती है।

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

#menu:hover a:focus {
  left: 0;
  background: none;
}

अज्ञात आकार के मेनू

हमारे मेनू में चार आइटम और कुछ पैडिंग शामिल हैं, इसलिए इसे लंबवत रूप से केंद्र में रखना आसान है: प्रत्येक पंक्ति लगभग 1.3em है (हम 'लाइन-ऊंचाई' को स्पष्ट रूप से सेट कर सकते थे, अगर हम निश्चित होना चाहते थे) और पैडिंग 1em है, जो लगभग 6.2em बनाता है, इसलिए -3em का एक शीर्ष मार्जिन मेनू को उसकी आधी ऊँचाई से पीछे ले जाता है। लेकिन क्या हो अगर हम नहीं जानते कि मेनू में कितनी लाइनें हैं?

इस पेज का एक खंड ‘सीएसएस स्तर  3 में लंबवत केंद्रित’ सीएसएस चीजों पर element को लंबवत रूप से केंद्र में करने का एक रास्ता दिखाता है। उदाहरण वहाँ निरपेक्ष स्थिति का उपयोग करता है, लेकिन उसी तरीके को निश्चित स्थिति पर लागू किया जा सकता है।

हमें नकारात्मक शीर्ष मार्जिन (-3em) को निकालना होगा और इसे 0 पर सेट करना होगा। और हम 'transform' प्रॉपर्टी का उपयोग ट्रांसलेशन के साथ करते हैं, जो तत्व को अपनी ऊंचाई के आधे (50%) तक ले जाता है: 

#menu {
  margin: 0;
  transform: translate(0, -50%);
}

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

पुराने ब्राउज़रों को 'transform' प्रॉपर्टी का पता नहीं चल सकता है, इसलिए मेन्यू की अनुमानित ऊंचाई के आधे हिस्से के साथ निगेटिव टॉप मार्जिन रखना भी समझदारी है। '@support' नियम यहाँ काम आता है। यह सुनिश्चित करता है कि 'margin-top: 0' केवल उन ब्राउज़रों द्वारा लागू किया जाता है जो 'transform' को समझते हैं: 

#menu { margin: -3em 0 0 0 }
@supports (transform: translate(0, -50%)) {
  #menu {
    margin-top: 0;
    transform: translate(0, -50%);
  }
}

बस! बेशक, आप मेनू को विंडो के ऊपर या नीचे से स्लाइड कर सकते हैं, या वास्तव में कहीं से भी (किसी अन्य element के पीछे से, उदाहरण के लिए), लेकिन हम इसे एक अभ्यास के रूप में छोड़ देते हैं।

बर्ट बोस, डबल्यू3सी स्टाइल क्रियाकलाप अगुआ
प्रतिलिप्याधिकार © 1994–2021 W3C® Privacy policy

24 फरवरी 2017 को बनाया गया;
आखिरी अपडेट बुधवार 06 जन॰ 2021 05:40:49 पूर्वाह्न UTC

भाषाएँ

अनुवादों के बारे में