Статья Автор: Омарбек Нұр-Мұхаммед

Flexbox menu

Для создания меню на сайте с помощью Flexbox в CSS можно использовать следующий подход. Flexbox отлично подходит для выравнивания пунктов меню по горизонтали, добавления промежутков между ними и адаптивной верстки.


HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Меню</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="header">
    <nav class="navbar">
      <ul class="menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
</body>
</html>

 

CSS CODE
.navbar {
  background-color: #8c8282;
  padding: 10px 0;
  border-radius: 5px;
}
/* Делаем меню flex-контейнером */
.menu {
  display: flex;
  justify-content: center; /* центрируем меню */
  gap: 30px;              /* расстояние между пунктами */
  list-style: none;       /* убираем маркеры списка */
  margin: 0;
  padding: 0;
 
}
/* Стили для ссылок в меню */
.menu li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 5px 10px;
  transition: background-color 0.3s;
}
.menu li a:hover {
  background-color: #ff0c0c;
  border-radius: 7px;
}


 

                          Домашнее задание:                          

Печать