Δημιουργία μενού σε CSS

Σε αυτό το μάθημα θα εξασκηθούμε στη δημιουργία μενού ιστοτόπων. Ας φτιάξουμε για παράδειγμα το ακόλουθο μενού:

Αρχικά πρέπει να φτιάξουμε το HTML μέρος. Ας φτιάξουμε ένα div, τοποθετώντας μέσα σε αυτό τους συνδέσμους του μενού μας:

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