Как создать боковое меню используя Bootstrap, HTML, CSS и JavaScript | How to Create Bootstrap Sidebar Menu using HTML CSS and JavaScript
В этом видео мы создадим боковое меню с помощью Bootstrap, используя HTML CSS и JavaScript. Надеюсь, это видео будет для вас полезным. Если при создании этого кода возникнут трудности, вы сможете скачать архив с готовым исходным кодом ниже по ссылке.
Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, то напишите их в комментариях ниже.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BootStrap Sidebar Menu</title>
<!--font awesome(for icons)-->
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<!--BootStrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="wrapper">
<aside class="sidebar">
<div class="d-flex">
<button class="toggle-btn" type="button">
<i class="fas fa-bars"></i>
</button>
<div class="sidebar-logo">
<a href="#">Monster Tem</a>
</div>
</div>
<ul class="sidebar-nav">
<li class="sidebar-item">
<a href="#" class="sidebar-link">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">
<i class="fas fa-wallet"></i>
<span>Wallet</span>
</a>
</li>
<li class="sidebar-item">
<a
href="#"
class="sidebar-link collapsed has-dropdown"
data-bs-toggle="collapse"
data-bs-target=".tools"
aria-expanded="false"
aria-controls="tools"
>
<i class="fas fa-wrench"></i>
<span>Tools</span>
</a>
<ul
class="tools sidebar-dropdown list-unstyled collapse"
data-bs-parent=".sidebar"
>
<li class="sidebar-item">
<a
href="#"
class="sidebar-link collapsed"
data-bs-toggle="collapse"
data-bs-target=".drop-two"
aria-expanded="false"
aria-controls="drop-two"
>
Guides
</a>
<ul class="drop-two sidebar-dropdown list-unstyled collapse">
<li class="sidebar-item">
<a href="#" class="sidebar-link">Start a Blog</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Start a Website</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">
<i class="fas fa-bell"></i>
<span>Notifications</span>
</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="sidebar-item">
<a
href="#"
class="sidebar-link collapsed has-dropdown"
data-bs-toggle="collapse"
data-bs-target=".company"
aria-expanded="false"
aria-controls="company"
>
<i class="fas fa-building"></i>
<span>Company</span>
</a>
<ul
class="company sidebar-dropdown list-unstyled collapse"
data-bs-parent=".sidebar"
>
<li class="sidebar-item">
<a href="#" class="sidebar-link">About</a>
</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">Contact</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-footer">
<a href="#" class="sidebar-link">
<i class="fas fa-right-from-bracket"></i>
<span>Logout</span>
</a>
</div>
</aside>
<div class="main p-4">
<h1>BootStrap Sidebar Menu</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS КОД:
/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.wrapper {
display: flex;
}
.sidebar {
/* width: 260px;
min-width: 260px; */
width: 70px;
min-width: 70px;
z-index: 1000;
background: #0e2238;
display: flex;
flex-direction: column;
transition: 0.25s ease-in-out;
}
.sidebar.expand {
width: 260px;
min-width: 260px;
}
.sidebar .toggle-btn {
background: transparent;
padding: 2rem 1.8rem;
border: 0;
cursor: pointer;
}
.toggle-btn i {
font-size: 1.5rem;
color: #fff;
}
.sidebar .sidebar-logo {
margin: auto 0;
}
.sidebar:not(.expand) .sidebar-logo {
display: none;
}
.sidebar-logo a {
color: #fff;
font-size: 1.15rem;
font-weight: 600;
}
.sidebar-nav {
padding: 1rem 0;
flex: 1 1 auto;
}
.sidebar-item {
position: relative;
}
.sidebar-nav > .sidebar-item {
margin-bottom: 15px;
}
.sidebar .sidebar-link {
display: block;
padding: 0.6rem 1.6rem;
color: #fff;
font-size: 0.9rem;
white-space: nowrap;
border-left: 3px solid transparent;
}
.sidebar-link:hover {
background-color: rgba(255, 255, 255, 0.075);
border-left: 3px solid #4070f4;
}
.sidebar-link i {
font-size: 1.1rem;
margin-right: 0.75rem;
}
.sidebar:not(.expand) a.sidebar-link span {
display: none;
}
.sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
position: absolute;
top: 0;
left: 70px;
background: #0e2238;
padding: 0;
min-width: 15rem;
display: none;
}
.sidebar:not(.expand) .sidebar-item .drop-two {
top: 100%;
left: 0;
}
.sidebar:not(.expand) .sidebar-item:hover > .sidebar-dropdown {
display: block;
max-height: 15em;
width: 100%;
opacity: 1;
}
.sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
position: absolute;
content: "";
display: inline-block;
border: solid;
border-width: 0 0.075rem 0.075rem 0;
padding: 2px;
right: 1.5rem;
top: 1.4rem;
transform: rotate(-135deg);
transition: all 0.2s ease-out;
}
.sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
transform: rotate(45deg);
transition: all 0.2s ease-out;
}
.sidebar .sidebar-footer {
margin-bottom: 1.5rem;
}
.main {
min-height: 100vh;
width: 100%;
overflow: hidden;
background-color: #fafbfe;
transition: 0.35s ease-in-out;
}
.main h1 {
font-size: 1.5rem;
font-weight: 600;
}
JAVASCRIPT КОД:
let btn = document.querySelector(".toggle-btn");
let sideBar = document.querySelector(".sidebar");
btn.addEventListener("click", function () {
sideBar.classList.toggle("expand");
});
0 Комментарии