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