PricingLoginStart free
Tailwind CSS Academy · पाठ

संकुचित होने वाला मोबाइल साइडबार

JavaScript टॉगल, ओवरले बैकड्रॉप और सहज translate संक्रमण के साथ मोबाइल के लिए स्लाइड-इन ड्रॉअर साइडबार लागू करें।

पाठ 4, कुल 4 में से13 चरण

संकुचित होने वाला मोबाइल साइडबार, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

मोबाइल drawer साइडबार क्या है

मोबाइल drawer साइडबार तब स्क्रीन के बाएं किनारे से अंदर आता है जब हैमबर्गर बटन दबाया जाता है, और बंद करने पर बाहर चला जाता है। डेस्कटॉप साइडबार हमेशा दिखाई देता है, जबकि मोबाइल drawer डिफ़ॉल्ट रूप से CSS transform की सहायता से स्क्रीन के बाहर छिपा रहता है।

तीन तत्व मिलकर काम करते हैं: खुली drawer के पीछे के पृष्ठ को गहरा करने वाला backdrop overlay, अंदर सरकने वाला साइडबार पैनल, और ऊपर की पट्टी में मौजूद drawer को खोलने-बंद करने वाला टॉगल बटन।

<!-- Closed state: sidebar off-screen left -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-white z-50
                          -translate-x-full transition-transform duration-300">
  <!-- sidebar content -->
</aside>

<!-- Backdrop: hidden until drawer opens -->
<div id="backdrop" class="fixed inset-0 bg-black/50 z-40 hidden"></div>

खोलने-बंद करने वाला JavaScript टॉगल

टॉगल drawer से -translate-x-full class और backdrop से hidden class हटाकर काम करता है। बंद करते समय दोनों कार्रवाइयों को उलट दिया जाता है।

एक सरल सहायक फ़ंक्शन openDrawer() और closeDrawer() तर्क को साफ़ रखता है। drawer खुली होने पर body में overflow-hidden जोड़ें, ताकि overlay के पीछे पृष्ठ की सामग्री स्क्रॉल न हो।

<script>
  const drawer = document.getElementById('drawer');
  const backdrop = document.getElementById('backdrop');

  function openDrawer() {
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
  }

  function closeDrawer() {
    drawer.classList.add('-translate-x-full');
    backdrop.classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
  }

  // Clicking backdrop closes the drawer
  backdrop.addEventListener('click', closeDrawer);
</script>

Tailwind के साथ अंदर सरकने का संक्रमण

drawer पैनल पर Tailwind का transition-transform duration-300, -translate-x-full को टॉगल किए जाने पर सहज सरकने वाला एनीमेशन बनाता है। duration-300 300ms का ease संक्रमण सेट करता है, जो तेज़ महसूस होता है लेकिन झटकेदार नहीं।

आप ease-in-out से easing को अनुकूलित कर सकते हैं और सरल UI के लिए अवधि को duration-200 करके इसे और तेज़ कर सकते हैं। मुख्य बात यह है कि कस्टम CSS keyframes की आवश्यकता नहीं होती — Tailwind की संक्रमण उपयोगिताएं सब कुछ संभाल लेती हैं।

<!-- Drawer with slide transition -->
<aside
  id="drawer"
  class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50
         -translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
</aside>

Backdrop overlay की शैली

Backdrop overlay खुली drawer के पीछे की सामग्री को धुंधला करता है और दृश्य रूप से बताता है कि drawer एक केंद्रित पैनल है जिस पर ध्यान देना आवश्यक है। पूरे व्यूपोर्ट को 50% अपारदर्शिता वाले काले रंग से ढकने के लिए fixed inset-0 bg-black/50 z-40 का उपयोग करें।

Backdrop को z-40 पर रखें, जो drawer के z-50 से नीचे है, ताकि drawer उसके ऊपर दिखाई दे। transition-opacity duration-300 के साथ fade-in संक्रमण जोड़ने से overlay अधिक स्वाभाविक रूप से दिखाई देता है।

<div
  id="backdrop"
  class="fixed inset-0 bg-black/50 z-40 hidden
         transition-opacity duration-300">
</div>

Drawer नेविगेशन लिंक

drawer के अंदर नेविगेशन लिंक डेस्कटॉप साइडबार जैसा ही पैटर्न अपनाते हैं, लेकिन यह स्पर्श इंटरफ़ेस होने के कारण थोड़ा बड़ा पाठ उपयोग कर सकते हैं: मोबाइल स्क्रीन पर बेहतर पठनीयता के लिए text-sm के बजाय text-base।

लिंक को टैप करने पर तुरंत दृश्य प्रतिक्रिया देने के लिए active:bg-gray-800 का उपयोग करके tap-highlight-color: transparent व्यवहार जोड़ें। सूची को flex-1 overflow-y-auto से स्क्रॉल किया जा सकता है।

<nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
  <a href="/" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            bg-gray-800 text-white">
    Home
  </a>
  <a href="/features" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Features
  </a>
  <a href="/pricing" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Pricing
  </a>
</nav>

ऊपर की पट्टी में हैमबर्गर बटन

मोबाइल पर हैमबर्गर बटन उस ऊपरी पट्टी में होता है, जो साइडबार की जगह लेती है। इस ऊपरी पट्टी पर lg:hidden का उपयोग करें, ताकि यह केवल छोटी स्क्रीन पर दिखाई दे, जहाँ साइडबार छिपा होता है।

p-2 का उपयोग करके बटन का स्पर्श क्षेत्र कम से कम 44×44px रखें और इसमें 24px का आइकन (w-6 h-6) लगाएँ। इस तरह इसका कुल आकार 44px हो जाता है, जैसा कि Apple के HIG और Google के Material Design दिशानिर्देशों में सुझाया गया है।

<header class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
  <span class="font-bold text-gray-900">AppDash</span>
  <button
    onclick="openDrawer()"
    aria-label="Open navigation"
    class="p-2 text-gray-600 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

बंद करने के लिए कीबोर्ड से Escape

अभिगम्यता के लिए आवश्यक है कि drawer जैसे ओवरले तत्वों को Escape कुंजी से बंद किया जा सके। दस्तावेज़ पर keydown श्रोता जोड़ें, जो event.key === 'Escape' की जाँच करे और closeDrawer() को कॉल करे।

यह सभी modal सतहों के लिए WCAG 2.1 की आवश्यकता है। Escape समर्थन के बिना, केवल कीबोर्ड का उपयोग करने वाले उपयोगकर्ता drawer के अंदर फँस जाते हैं।

<script>
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      closeDrawer();
    }
  });
</script>

दाईं ओर के Drawer का रूपांतर

कुछ UI में नेविगेशन के बजाय फ़िल्टर, सेटिंग पैनल या विवरण दृश्य के लिए दाईं ओर का drawer उपयोग किया जाता है। left-0 को right-0 से बदलें और बंद स्थिति के रूपांतरण को -translate-x-full से translate-x-full में बदलें, ताकि पैनल दाएँ किनारे से अंदर की ओर खिसके।

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

<!-- Right drawer -->
<aside
  id="right-drawer"
  class="fixed inset-y-0 right-0 w-80 bg-white shadow-xl z-50
         translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
    <h2 class="text-lg font-semibold text-gray-900">Filter Options</h2>
    <button onclick="closeRightDrawer()" class="p-1 text-gray-400 hover:text-gray-600 rounded">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
  <div class="flex-1 overflow-y-auto p-5">
    <!-- Filter controls go here -->
  </div>
</aside>

स्वाइप करके बंद करने के संकेत की शैली

स्पर्श उपकरणों पर उपयोगकर्ता अक्सर यह अपेक्षा करते हैं कि वे drawer को स्वाइप करके बंद कर सकें। वास्तविक स्वाइप पहचानने के लिए JavaScript (Touch Events API) आवश्यक है, लेकिन drawer के शीर्ष पर खींचने वाला हैंडल जोड़कर आप इसका दृश्य संकेत दे सकते हैं — यह एक छोटी क्षैतिज पट्टी होती है, जो बताती है कि इसे स्वाइप किया जा सकता है।

इसे एक छोटे गोलाकार आयत की तरह शैली दें: mx-auto mt-2 w-10 h-1 rounded-full bg-gray-300। यह मूल मोबाइल ऐप से वेब के लिए अपनाया गया सामान्य UX तरीका है।

<aside class="fixed inset-y-0 left-0 w-72 bg-gray-900 z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <!-- Drag handle -->
  <div class="flex justify-center pt-3">
    <div class="w-10 h-1 rounded-full bg-gray-600"></div>
  </div>
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 mt-1 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      &times;
    </button>
  </div>
</aside>

अभिगम्यता के लिए Focus Trap

जब drawer खुला हो, तो कीबोर्ड का focus उसके भीतर सीमित रहना चाहिए। इससे Tab कुंजी द्वारा नेविगेशन ओवरले के पीछे छिपी सामग्री तक नहीं पहुँचता, जो स्क्रीन रीडर उपयोगकर्ताओं को भ्रमित कर सकता है।

पूरा focus trap लागू करने के लिए JavaScript आवश्यक है (Tab और Shift+Tab से focus योग्य तत्वों के बीच चक्र बनाना), फिर भी यह सुनिश्चित करें कि बंद करने वाला बटन drawer के भीतर पहला focus योग्य तत्व हो और उसे autofocus मिले या drawer खुलने पर उसे प्रोग्राम के माध्यम से focus किया जाए।

<script>
  function openDrawer() {
    const drawer = document.getElementById('drawer');
    const backdrop = document.getElementById('backdrop');
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');

    // Move focus into drawer for accessibility
    const closeBtn = drawer.querySelector('button[data-close]');
    if (closeBtn) closeBtn.focus();
  }
</script>

<!-- Close button receives focus first -->
<button
  data-close
  onclick="closeDrawer()"
  class="text-gray-400 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded"
  aria-label="Close menu">
  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  </svg>
</button>

Drawer लेआउट का पूर्ण संयोजन

एक पूर्ण मोबाइल drawer में सभी हिस्से शामिल होते हैं: हैमबर्गर बटन वाली ऊपरी पट्टी, बंद करने वाले बटन और नेविगेशन लिंक वाला स्क्रीन से बाहर स्थित drawer पैनल, तथा backdrop ओवरले। ये तीनों स्वतंत्र HTML तत्व होते हैं, जिन्हें JavaScript आपस में जोड़ता है।

डेस्कटॉप पर (lg: breakpoint), ऊपरी पट्टी को lg:hidden से छिपाएँ और इसके बजाय स्थायी साइडबार दिखाएँ। मोबाइल और डेस्कटॉप का यह सरल विभाजन हर आधुनिक dashboard लेआउट की नींव है।

<!-- Top bar (mobile only) -->
<header class="lg:hidden sticky top-0 bg-white border-b border-gray-200 z-30 flex items-center justify-between px-4 py-3">
  <span class="font-bold">AppDash</span>
  <button onclick="openDrawer()" aria-label="Open menu" class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

<!-- Backdrop -->
<div id="backdrop" class="hidden fixed inset-0 bg-black/50 z-40" onclick="closeDrawer()"></div>

<!-- Drawer panel -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">AppDash</span>
    <button data-close onclick="closeDrawer()" aria-label="Close menu" class="text-gray-400 hover:text-white">&times;</button>
  </div>
  <nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
    <a href="/" class="block px-3 py-3 rounded-lg text-base font-medium bg-gray-800 text-white">Home</a>
    <a href="/features" class="block px-3 py-3 rounded-lg text-base font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Features</a>
  </nav>
</aside>

त्वरित जाँच

इस पाठ में सिखाई गई Tailwind CSS महारत की अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: मोबाइल drawer में तीन तत्व होते हैं — backdrop ओवरले, अंदर खिसकने वाला पैनल और हैमबर्गर ट्रिगर; स्लाइड एनीमेशन -translate-x-full और transition-transform duration-300 को बदलता है; और अभिगम्यता के लिए Escape-कुंजी समर्थन, drawer खुलने पर उसमें focus ले जाना और बंद करने के लिए क्लिक करने योग्य backdrop आवश्यक हैं। अब हम पाठ इनपुट और textarea की शैली बनाएँगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
30
पाठ
120
निःशुल्क सीखना शुरू करेंपूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “संकुचित होने वाला मोबाइल साइडबार” पाठ निःशुल्क है?

हाँ—“संकुचित होने वाला मोबाइल साइडबार” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“संकुचित होने वाला मोबाइल साइडबार” में मैं क्या सीखूँगा?

JavaScript टॉगल, ओवरले बैकड्रॉप और सहज translate संक्रमण के साथ मोबाइल के लिए स्लाइड-इन ड्रॉअर साइडबार लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“संकुचित होने वाला मोबाइल साइडबार” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. उत्तरदायी नेवबार बनाना
  2. स्टिकी और स्थिर नेविगेशन
  3. ऊर्ध्वाधर साइडबार लेआउट
  4. संकुचित होने वाला मोबाइल साइडबार
← Tailwind CSS Academy पर वापस जाएँ