Mencipta Menu dalam CSS

Dalam pelajaran ini, kita akan berlatih mencipta menu tapak web. Mari kita buat menu berikut sebagai contoh:

Pertama, kita perlu membuat bahagian HTML. Mari buat div, dan letakkan pautan menu kita di dalamnya:

<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 pautan menu diserlahkan. Ia melambangkan bahawa kita berada di halaman tapak web yang sepadan dengan item menu itu. Halaman sedemikian biasanya diserlahkan 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 letakkan pautan kami dalam satu baris:

#menu {
	display: flex;
}

Mari tulis gaya untuk pautan kami:

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

Mari buat tindak balas pautan ketika dilayari:

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

Penampilan pautan aktif adalah sama dengan penampilan pautan apabila dilayari. Mari gabungkan gaya ini:

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

Mari kumpulkan kod bersama-sama dan dapatkan kod untuk menu kami:

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