Hey everyone hope you all fine, I’ve been sharing an HTML CSS and JavaScript-based tutorial, today we are going to learn how to create a Responsive Sidebar Menu in HTML CSS and JavaScript. It’s very helpful to display the menus right sidebar. there are many websites displaying the menus on the right side.
A responsive sidebar menu is a commonly used user interface element in web design that provides a quick and easy way for users to navigate through a website. It is a vertical bar that typically appears on one side of the screen and contains links to different pages, sections, and other relevant information. This menu is created using a combination of HTML, CSS, and JavaScript to ensure that it is responsive and adapts to different screen sizes and devices.
HTML is used to structure the content of the sidebar menu, including the links, headings, and any other relevant information. It defines the basic structure of the menu and sets the stage for the styling and functionality that will be added using CSS and JavaScript.
CSS is used to define the styles of the menu, including the background color, font size, spacing, and other visual elements. It is also used to position the menu on the screen, typically using the CSS Flexbox or Grid layout techniques. These layout techniques allow designers to create a flexible and responsive layout that adapts to different screen sizes and devices.
JavaScript is used to add interactivity to the sidebar menu, allowing users to expand and collapse the menu when necessary. This is typically done using a toggle function that hides or shows the menu based on the user’s input. JavaScript can also be used to add animation effects, such as transitions and fades, to make the menu more engaging and visually appealing.
Responsive Sidebar Menu in HTML CSS and JavaScript
Creating a responsive sidebar menu requires careful planning and attention to detail. Designers must consider the different screen sizes and resolutions that their website will be viewed on and ensure that the menu adapts to these different devices. They must also consider the different user behaviors and expectations for each platform, ensuring that the menu is easy to use and intuitive for all users.
One important aspect of responsive design is the use of media queries. Media queries are a CSS technique that allows designers to specify different styles for different screen sizes and devices. This allows designers to create a more customized and optimized experience for each platform, improving the overall user experience.
To create a responsive sidebar menu, designers typically start by creating the basic HTML structure of the menu. This includes creating a list of links, headings, and any other relevant information that will be included in the menu. They will also typically add a button or icon that will be used to toggle the menu open and closed.
Once the basic HTML structure of the menu has been created, designers will then use CSS to define the styles and positioning of the menu. This typically involves using the Flexbox or Grid layout techniques to create a flexible and responsive layout that adapts to different screen sizes and devices. They will also add styles to the button or icon that will be used to toggle the menu, ensuring that it is easy to find and use.
Finally, designers will use JavaScript to add interactivity and animation to the sidebar menu. This typically involves adding a toggle function that shows or hides the menu when the user clicks on the button or icon. They may also add animation effects, such as fades or transitions, to make the menu more engaging and visually appealing.
You May Also Like:
- Show and Hide Password in JavaScript
- How to Make a Responsive Navbar in HTML CSS
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make a Password Generator in JavaScript
- How to Make a Digital Clock Using JavaScript
Overall, a responsive sidebar menu is an important element of modern web design, providing users with an easy and efficient way to navigate through a website on any device or screen size. By using a combination of HTML, CSS, and JavaScript, designers can create a flexible and responsive menu that adapts to the different needs and expectations of users on each platform.
inside the video tutorial you will learn step by step how to create a responsive sidebar menu in HTML CSS and JavaScript. I’m going to share with you the complete source code of the project, you can check it out below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<script defer src="js/script.js"></script>
<title>Responsive Sidebar Menu</title>
</head>
<body>
<div class="sidebar open">
<div class="logo-details">
<img src="./Img/logo.jpg" class="logo-name" />
<div class="logo-name">DesignStudion</div>
<i class="bx bx-menu" id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class="bx bx-search"></i>
<input type="text" placeholder="Search" />
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class="bx bx-user"></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class="bx bx-message"></i>
<span class="links_name">Message</span>
</a>
<span class="tooltip">Message</span>
</li>
<li>
<a href="#">
<i class="bx bx-pie-chart-alt-2"></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class="bx bx-folder"></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">File Manager</span>
</li>
<li>
<a href="#">
<i class="bx bx-cart-alt"></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class="bx bx-heart"></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class="bx bx-cog"></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile_details">
<img src="./Img/user.jpg" alt="" />
<div class="name_name">
<div class="name">John Doe</div>
<div class="job">Web Designer</div>
</div>
</div>
<i class="bx bx-log-out" id="logout"></i>
</li>
</ul>
</div>
<div class="home-section">
<div class="text">Dashboard</div>
</div>
</body>
</html>
This is HTML based file, inside the file have basic html tags, font awesome icons that help us to display the icons, also CSS and JavaScript files are included.
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #11101d;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open {
width: 250px;
}
.sidebar .logo-details {
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details img {
width: 50px;
height: 50px;
/* margin-right: 1rem; */
}
.sidebar .logo-details .logo-name {
color: #fff;
font-size: 20px;
font-weight: 600px;
opacity: 1;
transition: all 0.5s ease;
margin-right: 0.2rem;
opacity: 0;
}
.sidebar.open .logo-details .logo-name {
opacity: 1;
}
.sidebar .logo-details #btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
text-align: center;
cursor: pointer;
}
.sidebar.open .logo-details #btn {
text-align: right;
}
.sidebar i {
color: #ffffff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list {
margin-top: 20px;
height: 100%;
}
.sidebar li {
margin: 8px 0;
list-style-type: none;
position: relative;
}
/* tooltiop */
.sidebar li .tooltip {
position: absolute;
top: -20px;
left: calc(100% - -15px);
z-index: 3;
background-color: #ffff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
pointer-events: none;
transition: 0;
opacity: 0;
}
.sidebar li:hover .tooltip {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip {
display: none;
}
.sidebar input {
height: 60px;
width: 100%;
width: 50px;
font-size: 15px;
font-weight: 400;
outline: none;
border: none;
border-radius: 12px;
transition: all 0.35 ease;
background: #1d1b31;
padding: 0 0 0 3.5rem;
font-size: 1rem;
}
.sidebar.open input {
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #fff;
}
.sidebar.open .bx-search:hover {
background-color: #11101d;
color: #fff;
}
.sidebar li a {
display: flex;
align-items: center;
height: 100%;
width: 100%;
text-decoration: none;
background-color: #11101d;
color: #ddd;
border-radius: 12px;
transition: all 0.4s ease;
}
.sidebar li a:hover {
background: #fff;
color: #1d1b31;
}
.sidebar li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
pointer-events: none;
transition: all 0.4s;
opacity: 0;
}
.sidebar.open li a .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i {
color: #11101d;
transition: all 0.5s ease;
}
.sidebar li i {
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile {
position: fixed;
left: 0;
height: 60px;
width: 78px;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile {
width: 250px;
}
.sidebar li .profile_details {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img {
width: 45px;
height: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job {
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job {
font-size: 12px;
}
.sidebar .profile #logout {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.3s ease;
cursor: pointer;
}
.sidebar.open .profile #logout {
width: 50px;
background-color: none;
}
.home-section {
position: relative;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 278px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section {
left: 250px;
width: calc(100% - 250px);
}
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 50px;
font-weight: 500px;
margin: 18px;
}
@media (min-width: 542px) and (max-width: 768px) {
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 30px;
font-weight: 500px;
margin: 10px;
}
}
@media (max-width: 420px) {
sidebar li .tooltip {
display: none;
}
}
This is a CSS file you need to use this file to design the sidebar, finally, you need to use JavaScript to display and hide the sidebar menus. You can check out the JS code below.
"use strict";
const sidebar = document.querySelector(".sidebar");
const closeBtn = document.querySelector("#btn");
closeBtn.addEventListener("click", () => {
sidebar.classList.toggle("open");
menuChangeBtn();
});
function menuChangeBtn() {
if (sidebar.classList.contains("open")) {
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
} else {
closeBtn.classList.replace("bx-menu-alt-right", "bx-menu");
}
}
That’s it to create a responsive sidebar menu in HTML CSS and JavaScript, I hope this tutorial is helpful and beneficial for you. If you’ve any questions / suggestions please leave a comment below, I will be happy to give you a response as soon as possible.
