Создание навигационного меню из списка

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 35
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
В этой серии заданий мы создадим полноценное навигационное меню для сайта, пройдя путь от простого списка до стилизованного и семантически верного компонента. Вы научитесь использовать теги `<ul>`, `<li>` и `<a>` для построения структуры меню, а также применять семантические теги, такие как `<nav>`, для улучшения доступности и SEO вашего сайта. Все стили уже написаны, ваша задача — правильно собрать HTML-каркас, заполняя пропущенные фрагменты кода. Это позволит вам сосредоточиться на структуре и закрепить знания о создании одного из самых важных элементов любого веб-сайта.
Список тем

Основа для меню: неупорядоченный список

id: 37828_nav-menu-01-ul

Любое навигационное меню в HTML начинается со списка. Ваша первая задача — создать контейнер для будущего меню, используя соответствующий тег для неупорядоченного списка. Внутри уже есть заготовки для пунктов меню.

CSS
/* Базовые стили для сброса отступов и маркеров */
body {
  font-family: sans-serif;
  padding: 15px;
}

ul {
  list-style-type: none; /* Убираем маркеры */
  margin: 0;
  padding: 0;
  border: 1px dashed #ccc;
  padding: 10px;
}
HTML
<input1>
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</input1>
Для создания неупорядоченных (маркированных) списков в HTML используется тег `<ul>` (Unordered List). Он должен оборачивать все элементы списка `<li>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37828_nav-menu-02-li

Теперь, когда у нас есть контейнер `<ul>`, нужно правильно разметить каждый пункт меню. Оберните текст "Портфолио" в тег элемента списка, чтобы он стал частью навигации.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px dashed #ccc;
  padding: 10px;
}

li {
  padding: 5px 0;
}
HTML
<ul>
  <li>Главная</li>
  <li>О нас</li>
  <input1>Портфолио</input1>
  <li>Контакты</li>
</ul>
Каждый отдельный пункт в неупорядоченном или упорядоченном списке должен быть обернут в тег `<li>` (List Item).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Превращаем текст в ссылки

id: 37828_nav-menu-03-a

Меню должно куда-то вести. Превратите текстовые метки в настоящие кликабельные ссылки. Для начала, оберните текст "Главная" в тег ссылки.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
HTML
<ul>
  <li><input1 href="#home">Главная</input1></li>
  <li><a href="#about">О нас</a></li>
  <li><a href="#portfolio">Портфолио</a></li>
</ul>
Для создания гиперссылок в HTML используется тег `<a>` (Anchor). Он должен оборачивать текст или изображение, которое станет ссылкой.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем адрес для ссылки

id: 37828_nav-menu-04-href

Ссылка без адреса бесполезна. Добавьте необходимый атрибут к тегу `<a>`, чтобы указать, куда должна вести ссылка "Контакты". Адрес для ссылки уже подготовлен.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}

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

a {
  text-decoration: none;
  color: #007bff;
}
HTML
<ul>
  <li><a href="#home">Главная</a></li>
  <li><a href="#about">О нас</a></li>
  <li><a input1="#contacts">Контакты</a></li>
</ul>
Чтобы указать адрес назначения для ссылки, используется атрибут `href` (Hypertext Reference). Например: `<a href="/page">Текст</a>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Семантический контейнер для навигации

id: 37828_nav-menu-05-nav

Чтобы поисковые системы и скринридеры понимали, что этот список является главной навигацией по сайту, его следует обернуть в специальный семантический тег. Сделайте это.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}

nav {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
HTML
<input1>
  <ul>
    <li><a href="#home">Главная</a></li>
    <li><a href="#about">О нас</a></li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</input1>
Для обозначения навигационных блоков на странице в HTML5 был введен тег `<nav>`. Он сообщает браузеру и поисковикам, что внутри находится навигация.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Горизонтальное меню с помощью CSS-класса

id: 37828_nav-menu-06-class-value

Сейчас меню выглядит как обычный вертикальный список. В CSS уже есть стиль для горизонтального меню, который применяется к элементам с классом `main-nav`. Добавьте этот класс к тегу `<ul>`.

CSS
body {
  font-family: sans-serif;
}

nav {
  background-color: #f0f0f0;
  padding: 10px;
}

.main-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* Располагаем элементы в ряд */
}

.main-nav li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}
HTML
<nav>
  <ul class="input1">
    <li><a href="#home">Главная</a></li>
    <li><a href="#about">О нас</a></li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</nav>
Чтобы применить CSS-стиль к элементу, ему нужно добавить атрибут `class` со значением, совпадающим с именем селектора в CSS. Например: `class="main-nav"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выделение активного пункта меню

id: 37828_nav-menu-07-active-state

Часто на сайтах текущая страница подсвечивается в меню. В CSS уже есть стиль для класса `active`. Добавьте этот класс к элементу списка `<li>` "О нас", чтобы визуально выделить его.

CSS
body {
  font-family: sans-serif;
}
nav {
  background-color: #f0f0f0;
}
ul {
  list-style-type: none; margin: 0; padding: 0; display: flex;
}
li a {
  display: block; padding: 10px 15px; text-decoration: none; color: #333;
}
/* Стиль для активного пункта */
li.active a {
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}
HTML
<nav>
  <ul>
    <li><a href="#home">Главная</a></li>
    <li input1="active"><a href="#about">О нас</a></li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</nav>
Чтобы добавить элементу несколько классов, их имена перечисляют через пробел в атрибуте `class`. Но в данном случае у элемента еще нет классов, поэтому нужно просто добавить атрибут `class` со значением `active`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание вложенного меню

id: 37828_nav-menu-08-submenu

Навигация бывает многоуровневой. Давайте добавим подменю к пункту "Услуги". Для этого нужно создать новый неупорядоченный список внутри существующего элемента `<li>`. Стили для отображения подменю уже готовы.

CSS
/* ... (предыдущие стили) ... */
body { font-family: sans-serif; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav > ul { display: flex; background: #eee; }
nav a { display: block; padding: 10px 15px; text-decoration: none; color: #333; }
nav li { position: relative; }

/* Стили для подменю */
nav ul ul {
  display: none; /* Скрываем по умолчанию */
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 150px;
}

/* Показываем при наведении */
nav li:hover > ul {
  display: block;
}
HTML
<nav>
  <ul>
    <li><a href="#home">Главная</a></li>
    <li>
      <a href="#services">Услуги</a>
      <input1>
        <li><a href="#s1">Веб-разработка</a></li>
        <li><a href="#s2">Дизайн</a></li>
      </input1>
    </li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</nav>
Чтобы создать подменю, вложите новый тег `<ul>` с его элементами `<li>` внутрь того `<li>`, который должен содержать выпадающий список. В нашем случае, это `<li>` с текстом 'Услуги'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру