چگونه ایجاد می‌شود: فیلد ورودی در منو

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

ابتدایی - اضافه کردن HTML:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

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

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

亲自试一试