Как сделать меню в html

Узнайте, как создать меню на своем сайте с помощью HTML и CSS: простые шаги, пример кода и дополнительные советы.

Создание меню в HTML

Для создания меню в HTML можно использовать следующую разметку:

<ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
</ul>

В таком случае меню будет выглядеть просто как список. Для того, чтобы добавить красивый стиль и выделить выбранный пункт, следует добавить стили к элементам. Например, так:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

a {
  display: block;
  padding: 8px;
  text-decoration: none;
  background-color: #eee;
  color: #000;
}

a:hover,
a.active {
  background-color: #ccc;
  color: #000;
}

Теперь меню будет выглядеть гораздо лучше:

• Пункт 1
• Пункт 2
• Пункт 3

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

<ul>
  <li><a href="#">Пункт 1</a>
    <ul>
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Подпункт 2</a></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
  <li><a href="#">Пункт 2</a></li>
  <li><a href="#">Пункт 3</a></li>
</ul>

Теперь меню будет выглядеть так:

• Пункт 1
  • Подпункт 1
  • Подпункт 2
  • Подпункт 3
• Пункт 2
• Пункт 3

Для того, чтобы добавить горизонтальное меню, нужно добавить стиль для списка и пунктов меню:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  flex-grow: 1;
  text-align: center;
}

a {
  display: block;
  padding: 8px;
  text-decoration: none;
  background-color: #eee;
  color: #000;
}

a:hover,
a.active {
  background-color: #ccc;
  color: #000;
}

Теперь меню будет выглядеть так:

• Пункт 1
• Пункт 2
• Пункт 3