Сохтани меню дар CSS

Дар ин дарс мо сохтани менюҳои вебсайтро амалӣ мекардем. Биёед барои намуна менюи зеринро созем:

Барои оғоз ба мо қисми HTML лозим аст. Як див созем, ки дар он пайвандҳои менюи мо ҷойгир карда шаванд:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

Чунон ки шумо дар намуна мебинед, яке аз пайвандҳои меню бо ранг ҷудо карда шудааст. Ин нишон медиҳад, ки мо дар саҳифаи вебсайт қарор дорем, ки ба ин нуқтаи меню мувофиқат мекунад. Ин гуна саҳифаҳоро маъмулан бо истифода аз синфи active ҷудо мекунанд:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#" class="active">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

Ҳоло биёед пайвандҳои худро дар як саф ҷойгир кунем:

#menu {
	display: flex;
}

Биёед услубҳои пайвандҳои худро нависем:

#menu a {
	margin-right: 5px;
	padding: 10px;
	font: 15px Arial;
	text-decoration: none;
	color: #1437AD;
	border: 1px solid #1437AD;
	background-color: white;
}

Биёед пайвандҳоро барои вокуниш ба ҳовери мувороб кунем:

#menu a:hover {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}

Намуди пайванди фаъол бо намуди пайванд дар ҳолати ҳовер якҷоя мешавад. Биёед ин услубҳоро якҷоя муттаҳид кунем:

#menu a:hover, #menu a.active {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}

Кодро якҷоя гирифта ва барои менюи худ код ба даст меорем:

<div id="menu">
	<a href="#">link text 1</a>
	<a href="#" class="active">link text 2</a>
	<a href="#">link text 3</a>
	<a href="#">link text 4</a>
	<a href="#">link text 5</a>
</div>

#menu {
	display: flex;
}
#menu a {
	margin-right: 5px;
	padding: 10px;
	font: 15px Arial;
	text-decoration: none;
	color: #1437AD;
	border: 1px solid #1437AD;
	background-color: white;
}
#menu a:hover, #menu a.active {
	color: blue;
	border: 1px solid blue;
	background-color: #F5F6FA;
}