برای ساختن منو یا navigation لازم است که کمی با div ها و css آشنا باشید تا بتوانید یک منوی دلخواه را به سلیقه خودتان بسازید.

html قطعه کد مورد نظر :

<div class="main-nav"> 
    <a class="active" href="#home">خانه</a>
    <a href="#news">اخبار</a>
    <a href="#contact">تماس با ما</a>
    <a href="#about">درباره ما</a>
 </div> 

css قطعه کد منو :


/* یک پیش زمینه به منو اضافه میکنیم. */
.main-nav {
  background-color: #333;
  overflow: hidden;
  direction:rtl;
}

/* لینکهای مرتبط را استایل میدهیم. */
.main-nav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* زمانی که موس روی آنها رود لینک چه رنگی شود */
.main-nav a:hover {
  background-color: #ddd;
  color: black;
}

/* در صورتیکه روی لینک یک بار کلیک شود چه رنگی نمایش داده شود. */
.main-nav a.active {
  background-color: #4CAF50;
  color: white;
}




خروجی :