Как создать меню своими руками пошаговая инструкция

16.07.2025

Выбор структуры и концепции меню

Определите, какой тип меню вы хотите создать: горизонтальное, вертикальное или выпадающее. Решите, какие пункты должны входить и как они будут связаны между собой. Создавайте логическую и понятную навигацию, чтобы посетители легко находили нужную информацию.

Подготовка базовой разметки

  1. Создайте контейнер для меню: используйте тег <nav> для обозначения области меню.
  2. Добавьте список пунктов: внутри контейнера разместите <ul> или <ol>.
  3. Заполните пункты: для каждого пункта вставьте тег <li> с ссылкой <a>.

Пример базовой разметки

<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О компании</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
</nav>

Добавление стилей и оформления

Чтобы меню выглядело аккуратно и удобно, задайте основные параметры через атрибуты style или подключите внешний файл CSS. Для горизонтального меню используйте свойство display: inline-block для <li>. Для вертикального – оставьте стандартное отображение.

Пример простых стилей для горизонтального меню

<style>
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 15px;
}
nav a {
text-decoration: none;
color: #000;
}
nav a:hover {
color: #007BFF;
}
</style>

Добавление интерактивности

Для расширенных возможностей можно использовать JS-укорения, чтобы реализовать открывающиеся подменю или анимацию. Введите необходимые сценарии с помощью <script> внутри страницы.

Пример простого раскрывающегося подменю

<nav>
<ul>
<li>
<a href="#services">Услуги</a>
<ul class="submenu">
<li><a href="#service1">Консультации</a></li>
<li><a href="#service2">Обучение</a></li>
</ul>
</li>
</ul>
</nav>
<style>
.submenu {
display: none;
margin-top: 5px;
padding-left: 15px;
}
nav li:hover .submenu {
display: block;
}
</style>

Проверка и финальные настройки

Просмотрите меню на разных устройствах, убедитесь, что оно отображается корректно. Проверьте работу ссылок и взаимодействий. При необходимости дополнительно настройте отступы, цвета и размер шрифта для удобства использования.