Горизонтальне меню

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

}