इस कोडलैब में, आपको वेब पर रिस्पॉन्सिव स्लाइड आउट साइड नेविगेशन लेआउट कॉम्पोनेंट बनाने का तरीका सिखाया जाएगा. हम कॉम्पोनेंट को बनाते समय, सबसे पहले एचटीएमएल, फिर सीएसएस, और फिर JavaScript का इस्तेमाल करेंगे.
इस कॉम्पोनेंट को बनाने के लिए चुनी गई सीएसएस वेब प्लैटफ़ॉर्म की सुविधाओं के बारे में जानने के लिए, मेरी ब्लॉग पोस्ट साइडनेव कॉम्पोनेंट बनाना पढ़ें.
सेटअप
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
app/index.htmlखोलें.
एचटीएमएल
सबसे पहले, एचटीएमएल सेटअप की बुनियादी जानकारी पाएं, ताकि आपके पास कॉन्टेंट और कुछ बॉक्स हों.
यहां दिए गए एचटीएमएल को <body> टैग में डालें.
<aside></aside>
<main></main>
<aside> में नेविगेशन मेन्यू होता है, जो <main> के साथ काम करता है. <main> में पेज का मुख्य कॉन्टेंट होता है.
इसके बाद, हम उन सिमैंटिक एलिमेंट में पेज का बाकी कॉन्टेंट भरेंगे.
<aside> एलिमेंट में नेविगेशन एलिमेंट, कुछ नेविगेशन लिंक, और बंद करने का लिंक जोड़ें.
<aside>
<nav>
<h4>My</h4>
<a href="#">Dashboard</a>
<a href="#">Profile</a>
<a href="#">Preferences</a>
<a href="#">Archive</a>
<h4>Settings</h4>
<a href="#">Accessibility</a>
<a href="#">Theme</a>
<a href="#">Admin</a>
</nav>
<a href="#"></a>
</aside>
लिंक, <nav> एलिमेंट में बहुत अच्छे लगते हैं. साथ ही, <nav> एलिमेंट, <aside> साइडबार में बहुत अच्छे लगते हैं.
हालांकि, हम इसे और बेहतर बना सकते हैं.
मुख्य कॉन्टेंट वाले एलिमेंट में, लेआउट के कॉन्टेंट को सिमैंटिक तरीके से रखने के लिए, हेडर और लेख जोड़ें.
<main>
<header>
<a href="#sidenav-open" class="hamburger">
<svg viewBox="0 0 50 40">
<line x1="0" x2="100%" y1="10%" y2="10%" />
<line x1="0" x2="100%" y1="50%" y2="50%" />
<line x1="0" x2="100%" y1="90%" y2="90%" />
</svg>
</a>
<h1>Site Title</h1>
</header>
<article>
{put some placeholder content here}
</article>
</main>
हेडर में, मेन्यू खोलने का लिंक मौजूद है. 'बंद करें' बटन, साइडबार में मौजूद होता है. हम जल्द ही व्यूपोर्ट के साइज़ के हिसाब से एलिमेंट दिखाएंगे और छिपाएंगे.
हमने <article> एलिमेंट में, प्लेसहोल्डर वाला एक वाक्य चिपकाया है. `` की जगह अपना कॉन्टेंट डालें या यहां दिया गया लॉरेम टेक्स्ट चिपकाएं:
<h2>Totam Header</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<h3>Subhead Totam Odit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<h3>Subhead</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
इस कॉन्टेंट और इसकी लंबाई की वजह से, पेज को स्क्रोल किया जा सकेगा. ऐसा तब होगा, जब कॉन्टेंट की लंबाई आपकी व्यूपोर्ट की ऊंचाई से ज़्यादा हो जाएगी.
अब तक आपने एक ऐसा एलिमेंट जोड़ा है जिसमें नेविगेशन, लिंक, और साइडनेव को बंद करने का तरीका शामिल है. आपने मुख्य एलिमेंट में हेडर, साइडनेव खोलने का तरीका, और एक लेख भी जोड़ा है. यह कोड पहले से ही साफ़-सुथरा, सिमैंटिक, और हमेशा काम करने वाला है. हालांकि, हम इसे सभी के लिए और भी साफ़-सुथरा और समझने में आसान बना सकते हैं. साइडबार में मौजूद लिंक को ज़्यादा साफ़ तौर पर मार्क किया जा सकता है.
हेडर ओपन लिंक एलिमेंट में title और aria-label एट्रिब्यूट जोड़ें:
<a href="#sidenav-open" class="hamburger">
<a href="#sidenav-open" title="Open Menu" aria-label="Open Menu" class="hamburger">
ओपन एसवीजी आइकॉन को भी ज़्यादा साफ़ तौर पर मार्क किया जा सकता है. ओपन लिंक एलिमेंट में मौजूद SVG में ये एट्रिब्यूट जोड़ें:
<svg viewBox="0 0 50 40">
<svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
साइडबार में मौजूद 'बंद करें' लिंक को ज़्यादा साफ़ तौर पर मार्क किया जा सकता है.
साइडनेव को बंद करने वाले लिंक एलिमेंट में title और aria-label एट्रिब्यूट जोड़ें:
<a href="#"></a>
<a href="#" title="Close Menu" aria-label="Close Menu"></a>
सीएसएस
अब एलिमेंट को लेआउट करने का समय है. मुख्य कॉन्टेंट और साइडनेव, <body> टैग के डायरेक्ट चाइल्ड हैं. इसलिए, यहां से शुरुआत करना सही रहेगा.
css/sidenav.css में यहां दी गई सीएसएस जोड़ें, ताकि <body> एलिमेंट, चाइल्ड एलिमेंट को लेआउट कर सके.
body {
display: grid;
grid: [stack] 1fr / min-content [stack] 1fr;
@media (max-width: 540px) {
& > :matches(aside, main) {
grid-area: stack;
}
}
}
इस लेआउट का मतलब है: stack नाम वाली एक लाइन बनाएं. इसमें सब कुछ शामिल करें. साथ ही, उस लाइन में दो कॉलम बनाएं. इनमें से दूसरे कॉलम का नाम भी stack है. पहले कॉलम का साइज़, उसमें मौजूद कॉन्टेंट के हिसाब से होना चाहिए. बाकी जगह दूसरे कॉलम के लिए छोड़ी जा सकती है.
इसके बाद, अगर व्यूपोर्ट 540px या इससे कम है, तो साइडनेव और मुख्य कॉन्टेंट एलिमेंट को एक ही लाइन और कॉलम में रखें. इससे वे 1x1 ग्रिड में एक-दूसरे के ऊपर दिखेंगे.
रिस्पॉन्सिव स्टैकिंग की इस सुविधा को आधार बनाकर, अब हम यूआरएल बार की स्थिति का इस्तेमाल करके, साइडनेव की दृश्यता और ट्रांज़िशन स्टाइल को टॉगल कर सकते हैं.
<aside> एलिमेंट को वापस app/index.html में अपडेट करें:
<aside>
<aside id="sidenav-open">
इससे सीएसएस, किसी एलिमेंट और यूआरएल हैश को एक साथ मैच कर पाती है. :target के इस्तेमाल के लिए यह ज़रूरी है.
अब एलिमेंट का आईडी, उस यूआरएल हैश से मैच कर सकता है जिसे हम <a> टैग की मदद से सेट करेंगे.
इसके अलावा, JavaScript को आसानी से टारगेट करने के लिए, उन मुख्य एलिमेंट के लिए आईडी जोड़ें जो साइडनेव को कंट्रोल करते हैं. सबसे पहले, साइडनेव खोलने वाले लिंक में आईडी जोड़ें:
<a href="#sidenav-open" class="hamburger" title="Open Menu" aria-label="Open Menu">
<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
इसके बाद, साइडनेव को बंद करने वाले लिंक में एक आईडी जोड़ें:
<a href="#" title="Close Menu" aria-label="Close Menu"></a>
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
इससे मैक्रो <body> रिस्पॉन्सिव स्टैकिंग लेआउट पूरा हो जाता है. साथ ही, यह हमें यूआरएल बार से जोड़ता है.
इसे जारी रखें!
<aside> का लेआउट भी साफ़-सुथरा है. इसमें दो चाइल्ड एलिमेंट होते हैं. पहला, <nav> है, जो पेपर जैसा दिखने वाला कॉम्पोनेंट है और स्लाइड आउट होता है. दूसरा, <a> लिंक एलिमेंट है, जो यूआरएल को # के तौर पर सेट करता है.
यह लिंक, पेपर स्लाइड आउट नेविगेशन के दाईं ओर दिखता है. इससे लोग, विज़ुअल कॉम्पोनेंट को खारिज करने के लिए "क्लिक ऑफ़" कर सकते हैं.
css/sidenav.css में यह सीएसएस जोड़ें:
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
}
मुझे लगता है कि यहां अनुपात और नाम बहुत अच्छे तरीके से दिए गए हैं. इससे ग्रिड को बेहतर तरीके से दिखाया जा सकता है और डिज़ाइनर को ज़्यादा कंट्रोल मिल सकता है.
इसके बाद, मुझे मुख्य कॉन्टेंट को शर्तों के हिसाब से ओवरले करना है. साथ ही, दस्तावेज़ को स्क्रोल करने पर भी अपनी जगह पर बने रहना है. यह position: sticky और कुछ overscroll-behavior के लिए एक बेहतरीन नौकरी है.
साइडनेव के लिए, यहां दी गई स्टाइल जोड़ें:
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
@media (max-width: 540px) {
position: sticky;
top: 0;
max-height: 100vh;
overflow: hidden auto;
overscroll-behavior: contain;
visibility: hidden; /* not keyboard accessible when closed */
}
}
इन स्टाइल से यह पक्का होता है कि साइडनेव, व्यूपोर्ट की ऊंचाई के बराबर हो, वर्टिकल तौर पर स्क्रोल हो, और इसमें स्क्रोल शामिल हो. सबसे अहम बात यह है कि इससे एलिमेंट छिप जाता है. डिफ़ॉल्ट रूप से, जब व्यूपोर्ट 540px या इससे छोटा हो, तब उस साइडनेव को छिपाएं. जब तक!
#sidenav-open एलिमेंट में :target सूडो-सिलेक्टर जोड़ें:
#sidenav-open {
@media (max-width: 540px) {
&:target {
visibility: visible;
}
}
}
जब उस एलिमेंट का आईडी और यूआरएल बार एक जैसा हो, तब visibility को visible पर सेट करें. पेज को स्क्रोल करने के बाद, साइड मेन्यू खोलें. इसके अलावा, साइडनेव खुला होने पर पेज को स्क्रोल करके देखें. आपकी क्या राय है?
app/sidenav.css के सबसे नीचे यह सीएसएस जोड़ें:
#sidenav-button,
#sidenav-close {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
touch-action: manipulation;
@media (min-width: 540px) {
display: none;
}
}
ये स्टाइल, हमारे ओपन और क्लोज़ बटन को टारगेट करती हैं. साथ ही, इनके टैप और टच स्टाइल के बारे में बताती हैं. इसके अलावा, जब व्यूपोर्ट 540px या इससे बड़े होते हैं, तब ये स्टाइल उन्हें छिपा देती हैं.
आइए, कुछ स्टाइल जोड़ने के लिए सीएसएस ट्रांसफ़ॉर्म का इस्तेमाल करें. साथ ही, सुलभता का ध्यान रखें.
css/sidenav.css में यह सीएसएस जोड़ें:
#sidenav-open {
--easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
--duration: .6s;
...
@media (max-width: 540px) {
...
transform: translateX(-110vw);
will-change: transform;
transition:
transform var(--duration) var(--easeOutExpo),
visibility 0s linear var(--duration);
&:target {
visibility: visible;
transform: translateX(0);
transition: transform var(--duration) var(--easeOutExpo);
}
}
@media (prefers-reduced-motion: reduce) {
--duration: 1ms;
}
}
कुछ JavaScript कोड जोड़ना
Escape कुंजी दबाने पर मेन्यू बंद हो जाना चाहिए. js/index.js में यह JS जोड़ें:
const sidenav = document.querySelector('#sidenav-open');
sidenav.addEventListener('keyup', e => {
if (e.code === 'Escape') {
document.location.hash = '';
}
});
यह साइडनेव एलिमेंट पर मुख्य इवेंट को मॉनिटर करता है.
अगर यह Escape है, तो यह यूआरएल हैश को खाली पर सेट करता है. इससे साइडनेव ट्रांज़िशन आउट हो जाता है.
UX JS का यह अगला हिस्सा, फ़ोकस मैनेजमेंट है. मुझे साइडनेव को आसानी से खोलने और बंद करने की सुविधा चाहिए. इसलिए, मैं तब तक इंतज़ार करता हूं, जब तक साइडनेव का ट्रांज़िशन पूरा नहीं हो जाता. इसके बाद, मैं यूआरएल हैश से इसकी तुलना करके यह पता लगाता हूं कि यह खुला है या बंद है. इसके बाद, मैं JavaScript का इस्तेमाल करके, फ़ोकस को उस बटन पर सेट करता हूं जिसे उपयोगकर्ता ने अभी-अभी दबाया है.
js/index.js में यह JavaScript जोड़ें:
const closenav = document.querySelector('#sidenav-close');
const opennav = document.querySelector('#sidenav-button');
sidenav.addEventListener('transitionend', e => {
if (e.propertyName !== 'transform') {
return;
}
const isOpen = document.location.hash === '#sidenav-open';
isOpen
? closenav.focus()
: opennav.focus();
});
इसे आज़माएं
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
नतीजा
मुझे इस कॉम्पोनेंट से जुड़ी यही जानकारी चाहिए थी. इसे बेहतर बनाने के लिए, बेझिझक इसका इस्तेमाल करें. इसे यूआरएल के बजाय JavaScript की स्थिति के साथ चलाएं. साथ ही, इसे अपने हिसाब से बनाएं! इसमें हमेशा कुछ और जोड़ा जा सकता है या इस्तेमाल के और उदाहरण शामिल किए जा सकते हैं.
css/brandnav.css खोलकर, इस कॉम्पोनेंट पर लागू की गई लेआउट से जुड़ी स्टाइल देखें. मुझे नहीं लगा कि यह सुविधा सेट मेरे लिए ज़रूरी है. साथ ही, मुझे उम्मीद थी कि लेआउट से स्टाइल को अलग करने से कॉपी और पेस्ट करने को बढ़ावा मिलेगा. आपको वहां ज़्यादा जानकारी मिल सकती है!
स्लाइड आउट होने वाले रिस्पॉन्सिव साइडनेव कॉम्पोनेंट कैसे बनाए जाते हैं? क्या आपके पास एक से ज़्यादा कान के पर्दे हैं, जैसे कि दोनों कानों में एक-एक? हमें आपके समाधान को YouTube वीडियो में शामिल करने में खुशी होगी. इसके लिए, हमें ट्वीट करें या YouTube पर टिप्पणी करके अपना कोड शेयर करें. इससे सभी को मदद मिलेगी!