برای ساختن منو یا 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;
}
خروجی :