Oprettelse af menu i CSS

I denne lektion vil vi øve os i at oprette websitemenuér. Lad os for eksempel lave følgende menu:

Til at starte med er vi nødt til at lave HTML-delen. Lad os lave en div og placere vores menulinks i den:

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

Som du kan se på eksemplet, er et af menulinkene fremhævet. Det symboliserer, at vi befinder os på den webside, der svarer til dette menupunkt. Sådanne sider er det sædvanligt at fremhæve ved hjælp af klassen 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>

Lad os nu placere vores links på række:

#menu {
	display: flex;
}

Lad os skrive stilen for vores links:

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

Lad os lave en reaktion på links ved hover:

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

Udseendet af det aktive link falder sammen med udseendet af linket ved hover. Lad os kombinere disse stilarter:

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

Lad os samle koden og få koden til vores 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;
}