Главная страница » HTML » 34. Меню

34. Меню

Меню навигации является важным элементом любой веб-страницы, так как оно помогает пользователям легко перемещаться по сайту. В этом уроке мы рассмотрим, как создать меню навигации с помощью HTML.

Основные элементы меню

Меню навигации создается с использованием элементов списка <ul> и <li>. Каждый пункт меню представляет собой элемент списка, внутри которого находится ссылка <a>.

HTML-структура

Пример базовой структуры меню навигации:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример меню навигации</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a></li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с меню навигации, созданной с помощью HTML.</p>
  </main>
  <footer>
    <p>&copy; 2024 Мой сайт. Все права защищены.</p>
  </footer>
</body>
</html>

Объяснение кода

HTML-структура:
- Элемент <header> используется для обертки навигационного меню.
- Элемент <nav> содержит список <ul>, который представляет собой меню.
- Каждый пункт меню <li> содержит ссылку <a>.

Пример использования меню навигации

Полный пример HTML-документа с меню навигации:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример меню навигации</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a></li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с меню навигации, созданной с помощью HTML.</p>
  </main>
  <footer>
    <p>&copy; 2024 Мой сайт. Все права защищены.</p>
  </footer>
</body>
</html>

Добавление подменю

В меню навигации также можно добавлять подменю, создавая вложенные списки.

Пример меню с подменю:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример меню с подменю</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li>
          <a href="#about">О нас</a>
          <ul>
            <li><a href="#team">Наша команда</a></li>
            <li><a href="#history">История</a></li>
          </ul>
        </li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с меню и подменю, созданной с помощью HTML.</p>
  </main>
  <footer>
    <p>&copy; 2024 Мой сайт. Все права защищены.</p>
  </footer>
</body>
</html>

Объяснение кода с подменю

Подменю:
- Внутри элемента списка <li> с пунктом «О нас» находится вложенный список <ul>.
- Вложенный список содержит пункты подменю с ссылками «Наша команда» и «История».

Заключение

В этом уроке мы рассмотрели, как создать меню навигации для веб-страницы с помощью HTML. Мы узнали, как структурировать меню и подменю, а также как использовать списки и ссылки для создания навигационных элементов.

Тестовое задание

Создайте собственное меню навигации для веб-страницы, используя следующие элементы:

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

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Тестовое задание: Меню</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li>
          <a href="#about">О нас</a>
          <ul>
            <li><a href="#team">Наша команда</a></li>
            <li><a href="#history">История</a></li>
          </ul>
        </li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с меню и подменю, созданной с помощью HTML.</p>
  </main>
  <footer>
    <p>&copy; 2024 Ваш сайт. Все права защищены.</p>
  </footer>
</body>
</html>

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