• خانه
• اخبار
• تماس با ما
• درباره ما

دو راه برای ایجاد یک منوی افقی وجود دارد: استفاده از آیتم های لیست inline یا آیتم های لیست شناور(floating).

آیتم های لیست inline

یک راه برای ایجاد یک نوار منوی افقی، این است که عناصر <li> را به صورت inline (درون خطی) مشخص کنیم، و از کد استاندارد مقاله ی قبلی استفاده کنیم:

li {
  display: inline;
}

توضیح مثال بالا:

به طور پیش فرض، عناصر <li> بلوکی(block) هستند.  با استفاده از دستور display: inline، ما شکست های خط(line breaks) را از قبل یا بعد از هر آیتم لیست حذف می کنیم تا به صورت خطی نمایش داده شوند.

آیتم های لیست شناور(float)

یک راه دیگر برای ایجاد یک منوی افقی، این است که عناصر <li> را شناور(float) کنیم  و برای لینک های منو، یک چینش(layout) را مشخص کنیم:

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

 توضیح مثال بالا:

1. دستور float: left : با استفاده از دستور float، بلوک عناصر در کنار یکدیگر شناور می شوند.

2. دستور display: block : به ما امکان می دهد تا padding (و height و width و margin و غیره را اگر بخواهیم) مشخص کنیم.

3. دستور padding: 8px : مقداری padding را بین هر عنصر <a> مشخص می کند تا بهتر به نظر برسند.

4. دستور background-color: #dddddd : به هر عنصر <a> یک رنگ پس زمینه ی خاکستری را اضافه می کند.

نکته: اگر می خواهید یک رنگ پس زمینه ی تمام عرض(full-width) داشته باشید، background-color را به جای عنصر <a> به عنصر <ul> اضافه کنید.

ul {
  background-color: #dddddd;
}

مثال هایی از نوار منوی افقی

در زیر، یک نوار منوی ساده با یک رنگ پس زمینه ی سیاه ایجاد می کنیم و رنگ پس زمینه ی لینک ها را وقتی که کاربر ماوس را روی آنها می برد، تغییر می دهیم:

• خانه
• اخبار
• تماس با ما
• درباره ما

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*تغییر رنگ لینک به سیاه وقتی که ماوس روی آن می رود*/
li a:hover {
  background-color: #111;
}

رنگی کردن منوی فعال(منوی فعلی)

کلاس "active" را به لینک فعلی اضافه کنید تا به کاربر امکان دهید تا بداند در چه صفحه ای قرار دارد:

• خانه
• اخبار
• تماس با ما
• درباره ما

.active {
  background-color: #04AA6D;
}

راست چین کردن لینک ها

ما می توانیم با شناور(float) کردن آیتم های لیست به سمت چپ(float:left)، آنها را چپ چین کنیم، یا با استفاده از float:right آنها را راست چین کنیم:

• خانه
• اخبار
• تماس با ما
• درباره ما

 <ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li style="float:right"><a class="active" href="#about">درباره ما</a></li>
</ul> 

 تقسیم کننده های کادرها در CSS

برای اینکه برای لینک ها، یک خط تقسیم کننده ایجاد کنیم، (برای منوی راست چین) کافیست ویژگی border-left را برای <li> ها اضافه کنیم:

• خانه
• اخبار
• تماس با ما
• درباره ما

/* اضافه کردن کادر سمت چپ برای تمام آیتم های لیست به جز آیتم آخر*/
li {
  border-left: 1px solid #bbb;
}

li:last-child {
  border-right: none;
} 

منوی ثابت شده(Fixed)

در مثال های زیر، منو در بالا یا پایین صفحه قرار می گیرد، حتی اگر کاربر صفحه را اسکرول کند:

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

نکته: موقعیت ثابت(Fixed position)، ممکن است در موبایل ها به درستی کار نکند.

نوار افقی خاکستری

در زیر یک مثال از یک نوار افقی خاکستری با یک کادر(border) نازک خاکستری را مشاهده می کنید:

• خانه
• اخبار
• تماس با ما
• درباره ما

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

بررسی منوی چسبنده(Sticky) در CSS

برای ایجاد یک منوی چسبنده، دستور position: sticky را به عنصر <ul> بدهید. موقعیت(position) یک عنصر چسبنده(sticky)، بسته اسکرول، بین relative و fixed تغییر می کند.

موقعیت مورد نظر برابر با relative است، تا زمانی که یک جابجایی(offset) در ناحیه ی قابل دید(viewport) انجام شود. سپس در مکان خود می چسبد(مانند position:fixed).

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

نکته: مرورگر اینترنت اکسپلورر از موقعیت دهی sticky پشتیبانی نمی کند. و مرورگر سافاری(Safari) به یک دستور webkit- prefix- نیاز دارد(به مثال زیر توجه کنید). برای اینکه موقعیت دهی sticky کار کند، همچنین باید حداقل از یکی از دستورات top یا bottom یا left یا right استفاده کنیم.

 چند مثال دیگر

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li,ul.topnav li.left {float: none;}
  ul.topnav li a{text-align: center;}
}

 @media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: right;
    padding: 15px;
  }
  
  div.content {margin-right: 0;}
}

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">منوی کشویی</a>
    <div class="dropdown-content">
      <a href="#">لینک 1</a>
      <a href="#">لینک 2</a>
      <a href="#">لینک 3</a>
    </div>
  </li>
</ul>

• قبلی