DEV Community

Robson Muniz
Robson Muniz

Posted on

🎬How To Make Side Navigation Menu Using HTML And CSS | Sidebar Menu Design✨

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>

Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
roblevintennis profile image
Rob Levin

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.

Collapse
 
robsonmuniz16 profile image
Robson Muniz

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.

Collapse
 
roblevintennis profile image
Rob Levin

Ha yah 😂