Креирање менија у 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;
}