कैसे बनाया जाता है: मेनू में लॉगिन फॉर्म

नेविगेशन बार में लॉगिन फॉर्म कैसे जोड़ें

पहला कदम - HTML जोड़ें:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Username" name="username">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

* {बॉक्स-साइजिंग: बॉर्डर-बॉक्स;}
/* नेविगेशन बैर की शैली सेट करें */
.topnav {
  ओवरफ्लोअवर: हिड;
  बैकग्राउंड-कलर: #e9e9e9;
}
/* नेविगेशन लिंक की शैली सेट करें */
.topnav a {
  फ्लोट: लेफ्ट;
  डिस्प्ले: ब्लॉक;
  रंग: ब्लैक;
  लेफ्टटेक्स: सेंटर;
  पैडिंग: 14पाइक्स 16पाइक्स;
  टेक्स्ट-डिक्टेक्शन: नहीं;
  फ़ॉन्ट-साइज: 17पाइक्स;
}
/* माउस हॉवर पर नेविगेशन लिंक की शैली */
.topnav a:hover {
  बैकग्राउंड-कलर: #ddd;
  रंग: ब्लैक;
}
/* वर्तमान/सक्रिय लिंक की शैली */
.topnav a.active {
  बैकग्राउंड-कलर: #2196F3;
  रंग: व्हाइट;
}
/* इनपुट बॉक्स के शैली सेट करें */
.topnav .login-container {
  फ्लोट: राइट;
}
/* नेविगेशन अंदर के इनपुट के शैली सेट करें */
.topnav input[type=text] {
  पैडिंग: 6पाइक्स;
  मार्ग-टॉप: 8पाइक्स;
  फ़ॉन्ट-साइज: 17पाइक्स;
  बॉर्डर: नहीं;
  विस्तार: 150पाइक्स; /* आवश्यकता के अनुसार समायोजित करें (अगर टॉप नेविगेशन को नष्ट नहीं करें) */
}
/* इनपुट बॉक्स के अंदर के बटन के शैली सेट करें */
.topnav .login-container button {
  फ्लोट: राइट;
  पैडिंग: 6पाइक्स;
  मार्ग-टॉप: 8पाइक्स;
  मार्ग-राइट: 16पाइक्स;
  बैकग्राउंड: #ddd;
  फ़ॉन्ट-साइज: 17पाइक्स;
  बॉर्डर: नहीं;
  कर्सर: पॉइंटर;
}
.topnav .login-container button:hover {
  बैकग्राउंड: #ccc;
}
/* अनुपातीता जोड़ें - छोटे स्क्रीन पर नवीकरण विकल्प ऊपर से नीचे दिखाएं */
@मीडिया स्क्रीन एण्ड (मैक्स-विडथ: 600पाइक्स) {
  .topnav .login-container {
    फ्लोट: नहीं;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    फ्लोट: नहीं;
    डिस्प्ले: ब्लॉक;
    लेफ्टटेक्स: लेफ्ट;
    विस्तार: 100%;
    मार्गिन: 0;
    पैडिंग: 14पाइक्स;
  }
  .topnav input[type=text] {
    बॉर्डर: 1पिक्सल सॉलिड #ccc;
  }
}

स्वयं अभिप्राय से प्रयोग करें