Всем привет! Вы узнаете, как создать расширяемое и сворачиваемое боковое меню с выпадающими подменю с использованием HTML, CSS и jQuery. На эту боковую панель вы можете добавить столько подменю, сколько захотите.
Если высоты боковой панели недостаточно для отображения всех меню и подменю, боковая панель автоматически отрегулирует высоту и автоматически отобразит полосу прокрутки на боковой панели из-за свойства "overflow-y: auto;". Таким образом, вы можете прокручивать боковую панель вверх вниз. Фон боковой панели выполнен в стиле glass. Это стиль прозрачности blur. боковая панель будет более привлекательной в стиле glass. Давайте посмотрим, как создать эту боковую панель.
Сначала создайте файл index.html и файл style.css. После создания этих файлов запустите HTML-часть боковой панели в файле index.html как вы можете видеть на видео.
После завершения HTML-части, чтобы начать стилизацию боковой панели, свяжите файл style.css с файлом index.html между тегами <head></head>. Потом перейдите к стилю.CSS-файл и выполните укладку часть с боковой панели, как вы можете видеть в видео.
После укладки частью полного перейти к файлу index.html для jQuery или части. Чтобы запустить часть jQuery, привяжите скрипт jQuery libraries к файлу index.html между тегами <head></head>. Затем перед закрытием тега body откройте теги <script></script> и заполните часть боковой панели jQuery внутри этих тегов, как вы можете видеть на видео.
Вот и все. Надеюсь, это видео будет полезно для простого создания расширяемого и сворачиваемого бокового меню с выпадающими подменю.
Все исходные коды и файлы доступны для загрузки отсюда. Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar menu With Sub-menus | Using HTML, CSS & JQuery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
<div class="side-bar">
<div class="close-btn">
<i class="fas fa-times"></i>
</div>
<div class="menu">
<div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
<div class="item">
<a class="sub-btn"><i class="fas fa-table"></i>Tables<i class="fas fa-angle-right dropdown"></i></a>
<div class="sub-menu">
<a href="#" class="sub-item">Sub Item 01</a>
<a href="#" class="sub-item">Sub Item 02</a>
<a href="#" class="sub-item">Sub Item 03</a>
</div>
</div>
<div class="item"><a href="#"><i class="fas fa-th"></i>Forms</a></div>
<div class="item">
<a class="sub-btn"><i class="fas fa-cogs"></i>Settings<i class="fas fa-angle-right dropdown"></i></a>
<div class="sub-menu">
<a href="#" class="sub-item">Sub Item 01</a>
<a href="#" class="sub-item">Sub Item 02</a>
</div>
</div>
<div class="item"><a href="#"><i class="fas fa-info-circle"></i>About</a></div>
</div>
</div>
<section class="main">
<h1>Sidebar Menu With<br>Sub-Menus</h1>
</section>
<script type="text/javascript">
$(document).ready(function(){
//jquery for toggle sub menus
$('.sub-btn').click(function(){
$(this).next('.sub-menu').slideToggle();
$(this).find('.dropdown').toggleClass('rotate');
});
//jquery for expand and collapse the sidebar
$('.menu-btn').click(function(){
$('.side-bar').addClass('active');
$('.menu-btn').css("visibility", "hidden");
});
$('.close-btn').click(function(){
$('.side-bar').removeClass('active');
$('.menu-btn').css("visibility", "visible");
});
});
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
min-height: 100vh;
background: url(bg.jpg)no-repeat;
background-size: cover;
background-position: center;
}
.side-bar{
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
width: 290px;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
.side-bar.active{
left: 0;
}
.side-bar .menu{
width: 100%;
margin-top: 80px;
}
.side-bar .menu .item{
position: relative;
cursor: pointer;
}
.side-bar .menu .item a{
color: #fff;
font-size: 16px;
text-decoration: none;
display: block;
padding: 5px 30px;
line-height: 60px;
}
.side-bar .menu .item a:hover{
background: #8621F8;
transition: 0.3s ease;
}
.side-bar .menu .item i{
margin-right: 15px;
}
.side-bar .menu .item a .dropdown{
position: absolute;
right: 0;
margin: 20px;
transition: 0.3s ease;
}
.side-bar .menu .item .sub-menu{
background: rgba(255, 255, 255, 0.1);
display: none;
}
.side-bar .menu .item .sub-menu a{
padding-left: 80px;
}
.rotate{
transform: rotate(90deg);
}
.close-btn{
position: absolute;
color: #fff;
font-size: 20px;
right: 0;
margin: 25px;
cursor: pointer;
}
.menu-btn{
position: absolute;
color: #fff;
font-size: 20px;
margin: 25px;
cursor: pointer;
}
.main{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.main h1{
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
line-height: 80px;
}
@media (max-width: 900px){
.main h1{
font-size: 40px;
line-height: 60px;
}
}
$(document).ready(function(){
//jquery for toggle sub menus
$('.sub-btn').click(function(){
$(this).next('.sub-menu').slideToggle();
$(this).find('.dropdown').toggleClass('rotate');
});
//jquery for expand and collapse the sidebar
$('.menu-btn').click(function(){
$('.side-bar').addClass('active');
$('.menu-btn').css("visibility", "hidden");
});
$('.close-btn').click(function(){
$('.side-bar').removeClass('active');
$('.menu-btn').css("visibility", "visible");
});
});
0 Комментарии