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

 برای ایجاد یک منوی عمودی، می توانید به عناصر <a> درون یک لیست علاوه بر کدهای مقاله ی قبلی، استایل دهی کنید:

li a {
  display: block;
  width: 60px;
}

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

دستور display: block : نمایش دادن لینک ها به صورت عناصر بلوکی(block) باعث می شود تمام ناحیه ی لینک، قابل کلیک باشد(نه فقط متن لینک) و به ما امکان می دهد تا عرض(width) (و padding و margin و height و ... را در صورت نیاز) مشخص کنیم.

دستور width: 60px : عناصر بلوکی(block) عرض کامل در دسترس خود را به طور پیش فرض اشغال می کنند. از این رو، ما می خواهیم این عرض 60 پیکسل باشد.

ما همچنین می توانیم عرض <ul> را تنظیم کنیم و عرض <a> را حذف کنیم؛ زیرا آنها وقتی به عنوان عناصر بلوکی نمایش داده می شوند، تمام عرض موجود را اشغال می کنند. این کار باعث می شود نتیجه ای مانند مثال قبلی حاصل شود:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
}

مثال هایی از منوی عمودی

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

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

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

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

مشخص کردن لینک منوی فعلی(فعال)

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

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

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

وسط چین کردن لینک ها و اضافه کردن کادر(border)

برای وسط چین کردن لینک ها، می توانید دستور text-align:center را به <li> یا <a> اضافه کنید.

ویژگی border را به <ul> اضافه کنید تا به دور نوار منو، کادر اضافه شود. همچنین اگر می خواهید کادرها، درون منوها نیز اضافه شوند، یک دستور border-bottom را به تمام عناصر <li> به جز آخرین <li> اضافه کنید:

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

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

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

منوی عمودی با ارتفاع کامل و ثابت(Full-height Fixed)

در مثال زیر، یک منو با ارتفاع کامل و به صورت چسبنده ایجاد کرده ایم:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* ارتفاع کامل */
  position: fixed; /* چسبنده حتی با اسکرول */
  overflow: auto; /* فعال کردن اسکرول کردن، اگر نوار کناری محتوای زیادی داشته باشد */
}

نکته: این مثال ممکن است در موبایل به درستی کار نکند.

• بعدی
• قبلی