Создание навигации с выпадающими списками с помощью HTML и CSS — это довольно распространённая задача в веб-разработке. В этом ответе мы рассмотрим, как создать простую навигацию с выпадающими списками, используя только HTML и CSS.
Давайте начнём с базовой HTML-разметки. Мы создадим меню, которое будет содержать несколько пунктов, и некоторые из них будут иметь выпадающие подменю. Вот пример разметки:
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a>
<ul>
<li><a href="#web-design">Веб-дизайн</a></li>
<li><a href="#seo">SEO</a></li>
<li><a href="#marketing">Маркетинг</a></li>
</ul>
</li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>В этом примере мы создали основной элемент навигации <nav>, который содержит список <ul> с несколькими элементами <li>. Обратите внимание, что пункт меню «Услуги» содержит вложенный список <ul>, который представляет собой выпадающее меню.
Теперь давайте добавим немного CSS, чтобы стилизовать наше меню и сделать выпадающие списки видимыми. Вот пример CSS:
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
padding: 12px 16px;
}
nav ul li ul li a:hover {
background-color: #575757;
}В этом CSS-коде мы задаём цвет фона для навигации и устанавливаем стиль для элементов списка. Мы используем псевдокласс :hover, чтобы показать выпадающее меню, когда пользователь наводит курсор на пункт «Услуги». Вложенные списки по умолчанию скрыты с помощью display: none;, и они становятся видимыми, когда родительский элемент находится в состоянии hover.
Теперь, когда у нас есть как HTML, так и CSS, давайте посмотрим на полный код вместе:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Навигация с выпадающими списками</title>
<style>
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
padding: 12px 16px;
}
nav ul li ul li a:hover {
background-color: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a>
<ul>
<li><a href="#web-design">Веб-дизайн</a></li>
<li><a href="#seo">SEO</a></li>
<li><a href="#marketing">Маркетинг</a></li>
</ul>
</li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</body>
</html>С помощью этого кода вы получите простую навигацию с выпадающими списками, которая будет хорошо выглядеть на большинстве экранов. Вы можете дополнительно стилизовать её по своему усмотрению, изменяя цвета, размеры, шрифты и т.д.
Таким образом, создание навигации с выпадающими списками — это задача, которую можно выполнить с помощью базовых знаний HTML и CSS. Не забывайте тестировать своё меню на разных устройствах и браузерах, чтобы убедиться, что оно работает корректно.