Skep van 'n spyskaart in CSS

In hierdie les sal ons oefen om webwerf spyskaarte te skep. Kom ons maak die volgende spyskaart as voorbeeld:

Eerstens moet ons die HTML-gedeelte skep. Kom ons maak 'n div en plaas die skakels van ons spyskaart daarin:

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

Soos jy op die voorbeeld kan sien, is een van die skakels in die spyskaart uitgelig. Dit simboliseer dat ons op die webblad is wat ooreenstem met daardie spyskaartitem. Sulke bladsye word gewoonlik uitgelig met behulp van die klas 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>

Kom ons plaas ons skakels nou in 'n ry:

#menu {
	display: flex;
}

Kom ons skryf die style vir ons skakels:

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

Kom ons maak 'n reaksie vir skakels wanneer daar oor beweeg word:

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

Die voorkoms van 'n aktiewe skakel stem ooreen met die voorkoms van 'n skakel wanneer daar oor beweeg word. Kom ons kombineer hierdie style:

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

Kom ons voeg die kode bymekaar en kry die kode vir ons spyskaart:

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