Как создать навигационное меню для сайта с помощью HTML списков?

Как можно создать адаптивное оглавление (меню), используя HTML и CSS с помощью списков?
  • 25 мая 2024 г. 3:21
Ответы на вопрос 1
1. Для создания навигационного меню с помощью HTML списков, необходимо использовать элементы <ul> (unordered list) для создания списка пунктов меню и элементы <li> (list item) для каждого пункта.

Пример кода:
```html
<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
```

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

Пример кода CSS:
```css
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  margin-right: 10px;
}

@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }

  nav {
    text-align: center;
  }

  nav select {
    display: inline-block;
  }
}

@media only screen and (min-width: 769px) {
  nav select {
    display: none;
  }
}
```

3. Для создания выпадающего меню с использованием HTML и CSS можно использовать скрытие и показ элементов при наведении курсора.

Пример кода CSS для выпадающего меню:
```css
nav ul li {
  position: relative;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

nav ul li:hover ul {
  display: block;
}
```

С помощью этих простых шагов и немного дополнительных стилей CSS можно создать эффективное навигационное меню для вашего сайта.
Похожие вопросы