This tutorial will guide you through the process of creating a dynamic Sidebar Menu Hover Show/hide effect using Bootstrap 5. The menu will be hidden by default, expanding upon hover to reveal the full menu items. This approach provides a clean and efficient navigation solution for web applications.
Adding Bootstrap and Font Awesome
First, you need to include the necessary CSS files in the section of your HTML document. This includes Bootstrap 5 for the base styling and Font Awesome for icons.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
Creating the HTML Structure
Next, let’s create the basic HTML structure for the sidebar menu. This includes the header with the logo, the navigation list, and a dropdown for user settings.
<body>
<header>
<div class="d-flex flex-column flex-shrink-0 sidebar-wrap">
<a href="/" class="text-decoration-none logo-wrap">
<div class="icon-wrap"><i class="fab fa-slack"></i></div> <span>slack</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<div class="icon-wrap">
<i class="fas fa-home"></i>
</div>
<span> Home</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<div class="icon-wrap">
<i class="fas fa-tachometer-alt"></i>
</div>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<div class="icon-wrap">
<i class="fab fa-first-order"></i>
</div>
<span>Orders</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<div class="icon-wrap">
<i class="fab fa-product-hunt"></i>
</div>
<span>Products</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
<div class="icon-wrap">
<i class="fab fa-intercom"></i>
</div>
<span>Customers</span>
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="text-decoration-none dropdown-toggle dropdown-wrap" id="dropdownUser2"
data-bs-toggle="dropdown" aria-expanded="false">
<div class="icon-wrap">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle">
</div>
<strong>Customers</strong>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</header>
</body>
Styling with CSS
Now, let’s add the CSS styles to achieve the hover show/hide effect. These styles will control the width of the sidebar, the visibility of text elements, and the overall appearance of the menu.
.sidebar-wrap {
width: 60px;
height: 100vh;
background-color: #000;
color: #fff;
padding: 10px;
transition: 0.8s;
}
.sidebar-wrap:hover {
width: 280px;
}
.sidebar-wrap:hover .logo-wrap span {
display: flex;
}
.sidebar-wrap:hover .nav li .nav-link span {
display: flex;
}
.sidebar-wrap:hover .dropdown-wrap strong {
display: flex;
}
.sidebar-wrap:hover .dropdown-wrap::after {
display: inline-block;
}
.sidebar-wrap:hover .dropdown-wrap {
justify-content: flex-start;
}
.sidebar-wrap .logo-wrap {
color: #fff;
font-size: 35px;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-wrap .logo-wrap span {
font-size: 18px;
}
.sidebar-wrap .logo-wrap .icon-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
min-width: 40px;
}
.sidebar-wrap .nav {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
flex-wrap: nowrap;
}
.sidebar-wrap .nav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-color: #f5f5f5;
}
.sidebar-wrap .nav::-webkit-scrollbar {
width: 5px;
background-color: #f5f5f5;
border-radius: 5px;
}
.sidebar-wrap .nav::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #9b9b9b;
}
.sidebar-wrap .nav li {
margin-top: 5px;
}
.sidebar-wrap .nav li .nav-link {
color: #fff;
padding: 0;
font-size: 20px;
display: flex;
align-items: center;
gap: 5px;
}
.sidebar-wrap .nav li .nav-link .icon-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
min-width: 40px;
}
.sidebar-wrap .nav li .nav-link span {
font-size: 16px;
}
.sidebar-wrap .nav li .nav-link.active {
background-color: #ffa200;
}
.sidebar-wrap .nav li .nav-link:hover {
background-color: #ffa200;
}
.sidebar-wrap .dropdown-wrap {
display: flex;
align-items: center;
color: #fff;
gap: 15px;
font-size: 16px;
}
.sidebar-wrap .dropdown-wrap .icon-wrap {
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
Finalizing
No JavaScript code is required for this tutorial.
Congratulations! You have successfully implemented a Sidebar Menu Hover Show/hide effect using Bootstrap 5. This technique enhances the user experience by providing a clean and responsive navigation system.
