🎬How To Make Side Navigation Menu Using HTML And CSS | Sidebar Menu Design✨
Tags: html, css, beginners, javascript
Published: 2022-03-03 20:05:11

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…

***

{% youtube zbNVmQLvnqQ %}

***

###Source Code:

**HTML**

```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**

```sass
@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;
	}
}
```