Створення меню на CSS

У даному уроці ми практикуватимемося створювати менюшки сайтів. Давайте для прикладу зробимо наступне меню:

Для початку нам необхідно зробити HTML частину. Зробимо див, розмістивши в ньому посилання нашого меню:

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