Membuat Menu di CSS

Dalam pelajaran ini kita akan berlatih membuat menu situs. Mari kita buat contoh menu berikut:

Pertama-tama kita perlu membuat bagian HTML. Mari buat div, dan tempatkan di dalamnya tautan menu kita:

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

Seperti yang Anda lihat pada contoh, salah satu tautan menu disorot. Ini melambangkan bahwa kita berada di halaman situs yang sesuai dengan item menu ini. Halaman seperti itu biasanya disorot menggunakan kelas 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>

Sekarang mari kita susun tautan kita dalam satu baris:

#menu {
	display: flex;
}

Mari tulis gaya untuk tautan kita:

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

Mari buat reaksi tautan saat dihover:

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

Tampilan tautan aktif sama dengan tampilan tautan saat dihover. Mari gabungkan gaya-gaya ini:

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

Mari satukan kodenya dan dapatkan kode untuk menu kita:

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