چگونه ایجاد کنید: لینک‌های ناوبری با عرض یکسان

آموزش نحوه ایجاد ناوبری با لینک‌های ناوبری با عرض یکسان.

ناوبری پاسخگو ایجاد کنید

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

<!-- منو ناوبری -->
<div class="navbar">
  <a class="active" href="#">خانه</a>
  <a href="#">جستجو</a>
  <a href="#">تماس</a>
  <a href="#">ورود</a>
</div>

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

/* استایل برای منو ناوبری تنظیم کنید */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* لینک‌های ناوبری */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* چهار لینک با عرض یکسان. اگر دو لینک دارید از 50% استفاده کنید، برای سه لینک از 33.33% استفاده کنید و به همین ترتیب. */
  text-align: center; /* اگر می‌خواهید متن را در وسط قرار دهید */
}
/* رنگ پس‌زمینه هنگام قرارگیری ماوس روی آن اضافه کنید */
.navbar a:hover {
  background-color: #000;
}
/* استایل برای لینک‌های فعلی/فعال تنظیم کنید */
.navbar a.active {
  background-color: #04AA6D;
}
/* قابلیت پاسخگویی اضافه کنید - در صفحه‌هایی که عرض کمتر از 500 پیکسل دارند، لینک‌های ناوبری به صورت پشته‌ای نمایش داده شوند، نه به صورت پارالل */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* اگر می‌خواهید متن در صفحه‌های کوچک چپ چین باشد */
  }
}

آزمایش کنید

صفحات مرتبط

آموزش‌ها:نوار منو CSS