PricingLoginStart free
Tailwind CSS Academy · पाठ

उत्तरदायी नेवबार बनाना

लोगो, लिंक और CTA वाला क्षैतिज नेवबार बनाएँ, जो hidden और flex की उत्तरदायी यूटिलिटी का उपयोग करके मोबाइल पर हैमबर्गर मेनू में सिमट जाए।

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

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

नेविगेशन पट्टी की संरचना

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

navbar का ढाँचा इन तीन क्षेत्रों को क्षैतिज रूप से वितरित करने के लिए flex items-center justify-between का उपयोग करता है और आरामदायक पैडिंग के लिए px-6 py-4 रखता है।

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

लोगो और ब्रांड क्षेत्र

लोगो क्षेत्र आम तौर पर एक एंकर टैग होता है, जिसमें SVG लोगो या टेक्स्ट-आधारित ब्रांड नाम लिपटा होता है। आइकन और टेक्स्ट को साथ रखने पर flex items-center gap-2 का उपयोग करें, ताकि वे लंबवत रूप से संरेखित रहें।

लोगो का फ़ॉन्ट मोटा रखें और अपने ब्रांड के प्राथमिक रंग का उपयोग करें: font-bold text-xl text-blue-600। focus:outline-none focus-visible:ring-2 फ़ोकस शैली से एंकर को कीबोर्ड-फ़ोकस योग्य बनाएँ।

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

डेस्कटॉप नेविगेशन लिंक

डेस्कटॉप nav लिंक hidden md:flex items-center gap-6 रैपर के भीतर रहते हैं—छोटी स्क्रीन पर अदृश्य और मध्यम स्क्रीन तथा उससे बड़ी स्क्रीन पर फ्लेक्स पंक्ति के रूप में प्रदर्शित होते हैं। प्रत्येक लिंक के लिए text-sm font-medium text-gray-600 hover:text-gray-900 का उपयोग करें, जिससे हल्की डिफ़ॉल्ट शैली मिले और होवर करने पर रंग गहरा हो जाए।

होवर पर रंग बदलने को सहज बनाने के लिए transition-colors duration-150 जोड़ें और वर्तमान सक्रिय पृष्ठ दर्शाने के लिए अलग टेक्स्ट रंग या अंडरलाइन का उपयोग करें।

<div class="hidden md:flex items-center gap-6">
  <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
  <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
  <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
  <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>

डेस्कटॉप CTA और लॉगिन बटन

navbar का दायाँ भाग आम तौर पर एक भूत-जैसा साइन इन लिंक और ठोस साइन अप बटन रखता है। इन्हें hidden md:flex items-center gap-3 में रखने से वे मोबाइल पर छिपे और डेस्कटॉप पर संरेखित रहते हैं।

दोनों बटनों का साथ उपयोग स्पष्ट प्राथमिकता बनाता है: लौटने वाले उपयोगकर्ताओं के लिए भूत-जैसा लिंक और नए उपयोगकर्ताओं को जोड़ने के लिए ठोस बटन।

<div class="hidden md:flex items-center gap-3">
  <a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Sign in
  </a>
  <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </a>
</div>

हैमबर्गर मेनू बटन

मोबाइल पर हैमबर्गर बटन डेस्कटॉप लिंक की जगह लेता है। इसे केवल छोटी स्क्रीन पर md:hidden से दिखाएँ और इसमें सुलभ aria-label="Open menu" विशेषता दें।

यह बटन SVG का उपयोग करके तीन क्षैतिज रेखाएँ (पारंपरिक हैमबर्गर आइकन) प्रदर्शित करता है। क्लिक करने पर JavaScript एक क्लास को toggle करके मोबाइल मेनू पैनल दिखाता है। आरामदायक टैप क्षेत्र के लिए बटन स्वयं p-2 text-gray-600 hover:bg-gray-100 rounded-md का उपयोग करता है।

<button
  id="menu-btn"
  aria-label="Open menu"
  class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
  onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
  <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>

मोबाइल मेनू पैनल

मोबाइल मेनू पूरी चौड़ाई वाला पैनल है, जो हैमबर्गर बटन दबाने पर navbar के नीचे दिखाई देता है। यह डिफ़ॉल्ट रूप से hidden क्लास से छिपा रहता है, जिसे बटन क्लिक होने पर JavaScript हटा देता है।

लिंक को flex flex-col gap-1 px-4 pb-4 से लंबवत रूप से रखें और बड़े, अंगूठे से आसानी से टैप किए जा सकने वाले क्षेत्र के लिए प्रत्येक लिंक को block py-2 text-base font-medium दें।

<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
  <div class="flex flex-col gap-1 px-4 pb-4 pt-2">
    <a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
    <a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
    <a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
    <a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
    <a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
      Get Started
    </a>
  </div>
</div>

पूरी navbar को एक साथ बनाना

सभी भागों को एक ही <nav> तत्व में संयोजित करें। संरचना इस प्रकार है: छाया वाला रैपर nav, उसके भीतर अधिकतम-चौड़ाई वाला कंटेनर जिसमें तीन क्षेत्र—लोगो, डेस्कटॉप लिंक और डेस्कटॉप CTA—हों, और उसके बाद कंटेनर के बाहर पूरी चौड़ाई वाला मोबाइल मेनू पैनल।

भीतर का max-w-7xl mx-auto रैपर navbar की सामग्री को बड़े मॉनिटर पर बहुत अधिक फैलने से रोकता है और पृष्ठभूमि को किनारे से किनारे तक फैलने देता है।

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
      <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="/login" class="text-sm text-gray-600">Sign in</a>
      <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
    </div>
    <button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
            onclick="document.getElementById('mob').classList.toggle('hidden')">
      <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>
  </div>
  <div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
    <a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
    <a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
    <a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
  </div>
</nav>

सक्रिय लिंक संकेतक

सक्रिय लिंक संकेतक उपयोगकर्ताओं को बताता है कि वे वर्तमान में किस पृष्ठ पर हैं। एक सामान्य तरीका नीचे की बॉर्डर या टेक्स्ट रंग में बदलाव का उपयोग करना है। सक्रिय लिंक पर text-blue-600 border-b-2 border-blue-600 pb-0.5 लागू करें, ताकि वह धूसर लिंक से अलग दिखाई दे।

सर्वर-रेंडर किए गए ऐप में सक्रिय क्लास को सर्वर पर शर्त के अनुसार जोड़ें। JS फ़्रेमवर्क में वर्तमान रूट की तुलना लिंक के href से करें और क्लास को प्रोग्राम के माध्यम से लागू करें।

<div class="hidden md:flex items-center gap-6">
  <!-- Active link -->
  <a href="/features"
     class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
    Features
  </a>
  <!-- Inactive links -->
  <a href="/pricing"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Pricing
  </a>
  <a href="/blog"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Blog
  </a>
</div>

खोज इनपुट वाली navbar

सामग्री-प्रधान साइटों के लिए navbar में खोज फ़ील्ड जोड़ना एक सामान्य आवश्यकता है। खोज इनपुट को navbar के बीच में flex-1 max-w-md mx-8 का उपयोग करके रखें, ताकि इसकी चौड़ाई लचीली रहे और अनुपात भी बना रहे।

साफ़-सुथरी खोज पट्टी और फ़ोकस रिंग के लिए इनपुट पर w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 लगाएँ।

<div class="flex-1 max-w-md mx-8">
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
         fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
    </svg>
    <input
      type="search"
      placeholder="Search..."
      class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
             bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  </div>
</div>

ड्रॉपडाउन nav आइटम

ड्रॉपडाउन नेविगेशन आइटम होवर करने या क्लिक करने पर उप-मेनू दिखाता है। शुद्ध CSS होवर ड्रॉपडाउन लागू करने के लिए मूल लिंक पर group उपयोगिता और शुरुआत में hidden रहने वाले उप-मेनू पर group-hover:block का उपयोग करें।

ड्रॉपडाउन को मूल लिंक के ठीक नीचे रखने के लिए absolute top-full left-0 mt-1 से उसकी स्थिति तय करें। उचित पैनल जैसा रूप देने के लिए min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 जोड़ें।

<div class="relative group">
  <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
    Products
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
    <a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
    <a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
    <a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
  </div>
</div>

गहरे रंग का navbar रूपांतर

गहरे रंग का navbar bg-gray-900 जैसी गहरी पृष्ठभूमि और हल्के टेक्स्ट का उपयोग करता है। लिंक के लिए text-gray-600 को text-gray-300 में बदलें, होवर स्थिति के लिए hover:text-white रखें और बटन को bg-blue-500 में बदलें, क्योंकि उसे गहरी पृष्ठभूमि पर अलग दिखाई देना आवश्यक है।

गहरे रंग के navbar, डेवलपर टूल, SaaS डैशबोर्ड और तकनीकी दर्शकों को लक्षित करने वाले उत्पादों में लोकप्रिय हैं।

<nav class="bg-gray-900 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-white">DevTool</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
      <a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
      <a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
    </div>
    <a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Dashboard
    </a>
  </div>
</nav>

त्वरित जाँच

इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।

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

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

इस पाठ में आपने सीखा: तीन-क्षेत्रीय फ्लेक्स लेआउट (लोगो, लिंक, CTA) वाली अनुकूलनशील navbar संरचना; JavaScript से toggle किया जाने वाला हैमबर्गर बटन और मोबाइल मेनू पैनल, जो डेस्कटॉप पर md:hidden से छिपा रहता है; और hidden md:flex से नियंत्रित डेस्कटॉप लिंक दृश्यता, जिससे लिंक मोबाइल पर सिमटते और बड़ी स्क्रीन पर फैलते हैं। अब हम नेविगेशन को स्टिकी और फ़िक्स्ड बनाएँगे।

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

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

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

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

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

क्या “उत्तरदायी नेवबार बनाना” पाठ निःशुल्क है?

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

“उत्तरदायी नेवबार बनाना” में मैं क्या सीखूँगा?

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

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

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

“उत्तरदायी नेवबार बनाना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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