Kuunda Menyu kwa CSS

Katika somo hili tutafanya mazoezi ya kuunda menyu za tovuti. Hebu kwa mfano tufanye menyu ifuatayo:

Kwanza tunahitaji kutengeneza sehemu ya HTML. Tutengeneze div, na kuweka viungo ndani vyya menyu yetu:

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

Kama unavyoona kwenye kioleza, moja ya viungo vya menyu inatambulishwa. Inaashiria kwamba tupo kwenye ukurasa wa tovuti unaofanana na kipengele hicho cha menyu. Kurasa kama hizi huwekewa alama kwa kutumia kitambulisho 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>

Sasa hebu tuweke viungo vyetu kwa mstari mmoja:

#menu {
	display: flex;
}

Tuandike mitindo ya viungo vyetu:

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

Tufanye mwitikio wa viungo unapoelekezwa:

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

Muonekano wa kiungo active unafanana na ule wa kiungo unapoelekezwa. Hebu tuunganishe mitindo hii pamoja:

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

Tukusanye msimbo pamoja na tutapata msimbo wa menyu yetu:

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