چگونه ایجاد شود: لینک‌های ناوبری هم‌اندازه

یاد بگیرید که چگونه منوی ناوبری با لینک‌های هم‌اندازه ایجاد کنید.

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

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

<!-- منو ناوبری -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</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