In this tutorial, we’ll explore how to create a sleek and functional sidebar menu using HTML, CSS, and JavaScript. While Aitechray focuses primarily on Java tutorials to help developers master backend programming, we understand the importance of a well-designed front-end interface. Many Java developers need intuitive navigation designs for their applications, and this tutorial will provide you with a sidebar menu that can easily integrate into your Java-based projects.
The sidebar menu we’ll build will include icons, animations, and a toggle button to expand and collapse the navigation panel. This step-by-step guide offers a simple yet professional design to enhance your user interface and improve the navigation experience of your web applications.
Let’s get started with the code!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Professional Sidebar</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&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&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="toggle-btn" id="toggleBtn">
<i class="fa-solid fa-bars"></i>
<span class="tooltip">Open Sidebar </span>
</div>
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Menu</h2>
</div>
<ul class="menu">
<li>
<a href="#"><i class="fa-solid fa-gauge"></i>Dashboard</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-diagram-project"></i>Projects</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-database"></i>Repositories</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-gears"></i>Integrations</a>
</li>
<li>
<a href="#"><i class="fa-solid fa-eye"></i>Monitoring</a>
</li>
</ul>
<div class="sidebar-footer">
<div class="settings">
<i class=" fas fa-solid fa-gear"></i>
</div>
<div class="support">
<i class="fas fa-solid fa-headset"></i>
</div>
<div class="logout">
<i class="fas fa-solid fa-arrow-right-from-bracket"></i>
</div>
</div>
</aside>
<script src="script.js"></script>
</body>
</html>
Description:
This HTML structure provides a sidebar with menu items and a toggle button to open and close the sidebar. The menu contains sections for Dashboard, Projects, Repositories, Integrations, and Monitoring with corresponding icons.
CSS
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Urbanist", serif;
background: #f4f4f4;
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
/* Toggle Button */
.toggle-btn {
position: fixed;
top: 20px;
left: 20px;
background-color: #00ADB5;
color: white;
width: 35px;
height: 35px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
transition: background 0.3s ease;
}
.toggle-btn i {
font-size: 10px;
}
.toggle-btn:hover {
background-color: #393E46; }
.tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
left: 70px;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
border-radius: 4px;
font-size: 12px;
transition: opacity 0.3s ease-in-out;
}
.toggle-btn:hover .tooltip {
visibility: visible;
opacity: 1;
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: -260px; /* Hidden by default */
width: 250px;
height: 100%;
color: #EEEEEE;
background-color: #222831;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
transition: left 0.4s ease-in-out;
display: flex;
flex-direction: column;
}
.sidebar.open {
left: 0; /* Slide in */
}
.sidebar-header {
padding-bottom: 20px;
margin-top: 80px;
margin-left: 20px;
text-align: left;
font-size: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.menu {
list-style: none;
margin: 20px 0;
padding: 0;
}
.menu li {
margin: 10px 0;
}
.menu a {
text-decoration: none;
color: #EEEEEE;
font-size: 15px;
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
border-radius: 8px;
transition: background 0.3s ease;
}
.fas{
font-size: 15px !important;
}
.menu a:hover {
background: rgba(255, 255, 255, 0.2);
}
.menu a i {
font-size: 20px;
}
.sidebar-footer{
background-color: #00ADB5;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
padding:20px;
width: 250px;
}
/* Sidebar collapsed state */
.sidebar.collapsed {
width: 70px;
overflow: hidden;
}
.sidebar.collapsed .menu a {
justify-content: left; /* Center align icons */
}
.sidebar.collapsed .menu a span {
display: none; /* Hide text labels */
}
/* Sidebar footer in collapsed state */
.sidebar.collapsed .sidebar-footer {
width: 70px; /* Match the collapsed sidebar width */
justify-content: center; /* Center the icons */
padding-left: 0;
padding-right: 0;
}
/* Footer icons should be centered when collapsed */
.sidebar-footer i {
font-size: 20px;
margin: 0 auto;
}
Description:
This CSS styles the sidebar, toggle button, and menu items. It includes transitions and hover effects to create a polished look.
JS
const toggleBtn = document.getElementById("toggleBtn");
const sidebar = document.getElementById("sidebar");
const icon = toggleBtn.querySelector("i");
toggleBtn.addEventListener("click", () => {
if (sidebar.classList.contains("open")) {
sidebar.classList.remove("open");
sidebar.classList.add("collapsed");
icon.classList.replace("fa-times", "fa-bars");
toggleBtn.querySelector(".tooltip").textContent = "Open Sidebar";
} else if (sidebar.classList.contains("collapsed")) {
sidebar.classList.remove("collapsed");
sidebar.classList.add("open");
icon.classList.replace("fa-bars","fa-times");
toggleBtn.querySelector(".tooltip").textContent="Close Sidebar";
} else {
sidebar.classList.add("open");
icon.classList.replace("fa-bars","fa-times");
toggleBtn.querySelector(".tooltip").textContent="Open Sidebar";
}
});
Description:
This JavaScript adds functionality to the toggle button, allowing users to open and close the sidebar menu.
Conclusion
Integrating a well-designed sidebar into your Java-based applications can greatly improve navigation and user experience. This tutorial helps you create a clean sidebar using HTML, CSS, and JavaScript. You can further customize the styles and functionality to suit your project needs.