неділя, 16 листопада 2025 р.

Користуємося Інтернетом безпечно

Вікторина

вівторок, 15 квітня 2025 р.

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

Приклад стилю для меню

body {

font-family: Arial, San-Serif;

font-size: 100%;

background-color: #F6F2FF;

}

h1,h2,footer, nav {

color: #E07BE0;

text-align: center;

}

p {

font-size: 20px;

line-height: 1.3em;

margin-top: 2.1em;

margin-bottom: 1;

margin-left: 10%;

margin-right: 10%;

color: #420039;

}

li {

display: inline-block;

}

li a {

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

#menu {

display: inline-block;

}

#menu a {

margin-right: 5px;

margin-left: 30%;

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;

background: yellow;

border: 1px solid red;

background-color: #F5F6FA;

}

Створення меню в 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>

li {	display: inline-block;}li a {
  color: white;
  text-align: center;
 padding: 14px 16px;
  text-decoration: none;
}#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;
}