Сегодня в этом блоге вы узнаете, как создать минимальную строку выпадающего меню с подменю только в HTML и CSS. Раскрывающееся меню (иногда называемое раскрывающимся меню или списком) — это графический элемент управления, предназначенный для помощи посетителям в поиске определенных страниц, контента или функций на вашем веб-сайте. Щелчок или наведение курсора мыши на заголовок меню верхнего уровня отображает список опций в раскрывающемся меню.
Сначала на веб-странице есть только небольшая строка меню или панель навигации, но когда вы нажимаете на эту строку меню, список меню скользит вниз и становится видимым. Эти подменю или выпадающие меню сначала скрыты, и когда вы нажимаете на их родительский пункт меню, отображается выпадающий список. Я также добавил в список простой цвет при наведении курсора, как вы можете видеть на изображении.
Видео пример выпадающего меню
Если вам нравится эта выпадающая панель меню и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Строка выпадающего меню с использованием HTML и CSS [Исходные коды]
Чтобы создать эту программу (минимальное выпадающее меню с подменю). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Drop-down Menu CSS3</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label for="btn" class="button">Drop down
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn">
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<label for="btn-2" class="first">Features
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-2">
<ul>
<li><a href="#">Pages</a></li>
</ul>
</li>
<li>
<label for="btn-3" class="second">Services
<span class="fas fa-caret-down"></span>
</label>
<input type="checkbox" id="btn-3">
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">App Design</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<!-- This code used to rotate drop icon(-180deg).. -->
<script>
$('nav .button').click(function(){
$('nav .button span').toggleClass("rotate");
});
$('nav ul li .first').click(function(){
$('nav ul li .first span').toggleClass("rotate");
});
$('nav ul li .second').click(function(){
$('nav ul li .second span').toggleClass("rotate");
});
</script>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: 'Poppins', sans-serif;
}
nav{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background: #1b1b1b;
width: 400px;
line-height: 40px;
padding: 8px 25px;
border-radius: 5px;
}
nav label{
color: white;
font-size: 22px;
font-weight: 500;
display: block;
cursor: pointer;
}
.button span{
float: right;
line-height: 40px;
transition: 0.5s;
}
.button span.rotate{
transform: rotate(-180deg);
}
nav ul{
position: absolute;
background: #1b1b1b;
list-style: none;
top: 75px;
left: 0;
width: 100%;
border-radius: 5px;
display: none;
}
[id^=btn]:checked + ul{
display: block;
}
nav .menu:before{
position: absolute;
content: '';
height: 20px;
width: 20px;
background: #1b1b1b;
right: 20px;
top: -10px;
transform: rotate(45deg);
z-index: -1;
}
nav ul li{
line-height: 40px;
padding: 8px 20px;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
font-size: 18px;
}
nav ul li a{
color: white;
text-decoration: none;
font-size: 18px;
display: block;
}
nav ul li a:hover,
nav ul li label:hover{
color: cyan;
}
nav ul ul{
position: static;
}
nav ul ul li{
line-height: 30px;
padding-left: 30px;
border-bottom: none;
}
nav ul ul li a{
color: #e6e6e6;
font-size: 17px;
}
nav ul li span{
font-size: 20px;
float: right;
margin-top: 10px;
padding: 0 10px;
transition: 0.5s;
}
nav ul li span.rotate{
transform: rotate(-180deg);
}
input{
display: none;
}
JAVASCRIPT КОД:
<!-- Этот код используется для поворота значка капли (-180 градусов).. -->
<script>
$('nav .button').click(function(){
$('nav .button span').toggleClass("rotate");
});
$('nav ul li .first').click(function(){
$('nav ul li .first span').toggleClass("rotate");
});
$('nav ul li .second').click(function(){
$('nav ul li .second span').toggleClass("rotate");
});
</script>
Вот и все, теперь вы успешно создали минимальную выпадающую панель меню с подменю с помощью HTML и CSS. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.