Menu maken in CSS

In deze les gaan we oefenen met het maken van website menu's. Laten we als voorbeeld het volgende menu maken:

Om te beginnen moeten we het HTML gedeelte maken. We maken een div en plaatsen daarin de links van ons menu:

<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>

Zoals je kunt zien in het voorbeeld, valt één van de links in het menu op. Het symboliseert dat we ons op de website pagina bevinden die overeenkomt met dit menu-item. Dergelijke pagina's worden meestal gemarkeerd met de klasse 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>

Laten we nu onze links op een rij plaatsen:

#menu {
	display: flex;
}

Laten we de stijlen voor onze links schrijven:

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

Laten we een reactie toevoegen wanneer er over de links gehoverd wordt:

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

De weergave van de actieve link komt overeen met de weergave van de link bij hover. Laten we deze stijlen samenvoegen:

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

Laten we de code bij elkaar voegen en we krijgen de code voor ons menu:

<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;
}