Горизонтальне меню
1/17/2024
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальне меню</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Про компанію</a></li>
<li><a href="#">Продукція</a></li>
<li><a href="#">Каталог товарів</a></li>
<li><a href="#" id="nowopen">Відеогалерея</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
</body>
</html>
Далі підключаємо стилі вказівкою:
<link rel="stylesheet" href="css/style.css">
Розташовуємо пункти меню один за одним за допомогою правила CSS:
#menu ul li {
display: inline;
}
Створимо горизонтальну лінію на сторінці, де будуть відображатися пункти горизонтального меню. Обов'язково вказуємо відстань від края сторінки:
#menu ul {
border-bottom:2px solid #000000;
margin-left:0;
padding:4px 0;
}
Створюємо прямокутні рамки, в яких будуть розміщені пункти меню та вказуємо внутрішні відступи:
#menu ul li a {
text-decoration:none;
margin-left:3px;
border:1px solid #000000;
padding: 3px 4px;
border-bottom:0;
background:#CEDEFF;
}
Налаштовуємо відображення пунктів горизонтального меню, на які користувач вже натискував:
#menu ul li a:link {
color:#493;
}
#menu ul li a:visited {
color:#647;
}
#menu ul li a:hover {
color:#000;
background:#6699FF;
border-color:#227
}
Вказати вигляд пункту меню поточної веб-сторінки:
#menu ul li a#nowopen {
background:#fff;
border-bottom: 1px solid #fff;
}
За необхідності можна вирівняти горизонтальне меню по центру:
#menu {
margin:0 25% 0 25%;
}
