چگونه ایجاد کنیم: فرم ورود در منو

چگونه فرم ورود را به ناوبری اضافه کنیم

مرحله اول - اضافه کردن HTML:

<div class="topnav">
  <a class="active" href="#home">خانه</a>
  <a href="#about">درباره</a>
  <a href="#contact">تماس</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="نام کاربری" name="username">
      <input type="text" placeholder="پسورد" name="psw">
      <button type="submit">ورود</button>
    </form>
  </div>
</div>

دومین مرحله - اضافه کردن CSS:

* {box-sizing: border-box;}
/* تنظیمات استایل برای ناوبری */
.topnav {
  پرکنی: مخفی;
  رنگ پس‌زمینه: #e9e9e9;
}
/* تنظیمات استایل برای لینک‌های ناوبری */
.topnav a {
  حرکت: چپ;
  نمایش: block;
  رنگ: سیاه;
  جای‌گذاری‌ متن: وسط;
  حاشیه: 14px 16px;
  زیرلینک: none;
  اندازه‌ فونت: 17px;
}
/* استایل برای لینک‌هایی که روی آن‌ها قرار گرفته است */
.topnav a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}
/* استایل برای لینک‌های فعلی/فعال */
.topnav a.active {
  رنگ پس‌زمینه: #2196F3;
  رنگ: سفید;
}
/* تنظیمات استایل برای جعبه ورودی */
.topnav .login-container {
  حرکت: راست;
}
/* تنظیمات استایل برای ورودی‌های داخل ناوبری */
.topnav input[type=text] {
  حاشیه: 6px;
  مجوز بالا: 8px;
  اندازه‌ فونت: 17px;
  حاشیه: none;
  عرض: 150px; /* بر اساس نیاز تنظیم کنید (به شرطی که ناوبری بالا آسیب نبیند) */
}
/* تنظیمات استایل برای دکمه‌های داخل جعبه ورودی */
.topnav .login-container button {
  حرکت: راست;
  حاشیه: 6px;
  مجوز بالا: 8px;
  مجوز راست: 16px;
  背景: #ddd;
  اندازه‌ فونت: 17px;
  حاشیه: none;
  مکان‌نما: pointer;
}
.topnav .login-container button:hover {
  背景: #ccc;
}
/* افزودن قابلیت پاسخگویی - در صفحات کوچک، ناوبری عمودی به جای افقی نمایش داده می‌شود */
@media screen and (max-width: 600px) {
  .topnav .login-container {
    حرکت: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    حرکت: none;
    نمایش: block;
    جای‌گذاری‌ متن: چپ;
    عرض: 100%;
    مجوز: 0;
    حاشیه: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

به طور مستقیم امتحان کنید