Створення меню в CSS
Створення меню в 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;
}
Коментарі
Дописати коментар