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

Меню — это список ссылок внутри <nav>. Разметка:

<nav class="menu">
  <ul>
    <li><a href="index.html" aria-current="page">Главная</a></li>
    <li><a href="recipes.html">Рецепты</a></li>
    <li><a href="schedule.html">Расписание</a></li>
    <li><a href="contacts.html">Контакты</a></li>
  </ul>
</nav>

Стили для горизонтального меню:

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  display: block;
  padding: 10px 16px;
  color: #222;
  text-decoration: none;
  border-radius: 6px;
}

.menu a:hover {
  background-color: #eee;
}

.menu a[aria-current="page"] {
  background-color: #222;
  color: #fff;
}

Что здесь происходит:

• display: flex ставит пункты списка в ряд, gap — промежутки, flex-wrap: wrap переносит пункты на новую строку, если они не помещаются (на телефоне).
• list-style: none убирает точки списка, margin: 0 и padding: 0 — стандартные отступы списка.
• display: block и padding у ссылки делают щёлкабельной всю плашку пункта, а не только буквы.
• text-decoration: none убирает подчёркивание.
• aria-current="page" отмечает текущую страницу: программы чтения с экрана сообщат «текущая страница», а CSS подсветит пункт. На каждой странице этот атрибут ставят у своей ссылки.

Вертикальное меню

Для боковой колонки поменяйте направление:

.menu ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

Логотип слева, меню справа

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

Здесь .site-header — это <header>, в котором лежат логотип и <nav class="menu">.

Меню для телефона

Если пунктов немного, хватает flex-wrap: wrap — меню само перенесётся в две строки. Когда пунктов много, меню прячут под кнопку. Без JavaScript это делается тегом <details>: щелчок по <summary> показывает и прячет содержимое.

<details class="menu-mobile">
  <summary>Меню</summary>
  <ul>
    <li><a href="index.html">Главная</a></li>
    <li><a href="recipes.html">Рецепты</a></li>
    <li><a href="contacts.html">Контакты</a></li>
  </ul>
</details>

Привычную кнопку с тремя полосками («бургер»), анимацию и закрытие при щелчке мимо меню делают на JavaScript.

Подводные камни

• Меню съехало вниз «лесенкой» или с отступом слева — не обнулены margin и padding у <ul>.
• Щёлкается только текст, а не вся плашка — padding задан у <li>, а не у <a>. Отступы — ссылке, и ей display: block.
• Выпадающие подменю по :hover на телефоне неудобны: навести палец нельзя. Если подменю нужно, проверьте его на сенсорном экране или обойдитесь страницей раздела со списком ссылок.
• Меню на каждой странице копируется руками — на простом сайте это нормально, но при правке не забудьте поменять его везде. На больших сайтах общую часть страниц собирает программа на сервере, например на PHP.