In this video, I have created a Side Navigation Bar in HTML CSS, and JavaScript. I hope you will like this Dashboard Sidebar Menu Design…
Source Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<div class="nav_expand">
<i class="fa-solid fa-angle-right"></i>
</div>
<ul class="nav_list">
<li class="nav_listitem"><a href="#">
<i class="fa-solid fa-terminal"></i>
<p>Web Dev</p>
</a></li>
<li class="nav_listitem nav_listitem-active"><a href="#">
<i class="fa-solid fa-gauge "></i>
<p>Dashboard</p>
</a></li>
<li class="nav_listitem"><a href="#">
<i class="fa-solid fa-user"></i>
<p>User</p>
</a></li>
<li class="nav_listitem"><a href="#">
<i class="fa-solid fa-comment-dots"></i>
<p>Messages</p>
</a></li>
<li class="nav_listitem"><a href="#">
<i class="fa-solid fa-chart-pie"></i>
<p>Analytics</p>
</a></li>
<li class="nav_listitem"><a href="#">
<i class="fa-solid fa-gear"></i>
<p>Settings</p>
</a></li>
</ul>
</nav>
<script src="app.js"></script>
</body>
</html>
SCSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700&display=swap');
:root {
/* color variables */
--clr-primary: #9c36b5;
--clr-primary-hover: #29e6a7;
--clr-primary-dark: #039d69;
--clr-gray100: #f9fbff;
--clr-gray200: #eef1f6;
--clr-gray300: #e1e5ee;
--clr-gray400: #767b91;
--clr-grape200: #f8f0fc;
--clr-grape300: #be4bdb;
/* border radius */
--radius: 0.2rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat", sans-serif;
background-color: var(--clr-gray100);
}
.nav {
position: absolute;
background-color: #fff;
box-shadow: 0px 0px 10px var(--clr-gray300);
height: 100vh;
&_expand {
width: 2.5rem;
height: 2.5rem;
background-color: #fff;
box-shadow: 0px 0px 10px var(--clr-gray300);
border-radius: 50%;
position: absolute;
right: -1.2rem;
top: 1rem;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transform: rotateZ(-180deg);
transition: transform 250ms ease-in-out;
.fa-angle-right {
font-size: 25px;
}
&:hover {
color: var(--clr-grape300);
}
}
&_list {
display: flex;
flex-direction: column;
&item {
list-style: none;
transition: all 250ms ease-in;
padding: 1rem 1.5rem;
border-left: 6px solid transparent;
cursor: pointer;
&:first-child {
margin-bottom: 2rem;
}
&:hover {
background-color: var(--clr-grape200);
}
a {
display: flex;
gap: 1rem;
align-items: center;
color: var(--clr-gray400);
text-decoration: none;
font-weight: 500;
.fa-solid {
font-size: 35px;
}
}
&-active {
color: var(--clr-gray400);
border-left: 6px solid var(--clr-primary);
a {
color: var(--clr-primary);
}
}
}
}
// Closed State
&-closed &_expand {
transform: rotateZ(0deg);
}
&-closed &_listitem p {
display: none;
}
}
Top comments (3)
At this point and depending on which browsers you need to support, I think grid is the way to go fir this sort of thing. Why? Ease of coding with least LOC. responsiveness by design.
I agree with you Grid is one very good way to go...
But for some reason, people still don't like it as much as flexbox.
If I say that my project will use Grid, people will leave; if I switch to Flexbox, everyone is happy.
I think many devs have gotten used to the old way of doing things.
Ha yah 😂