6

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

 3 years ago
source link: https://dev.to/robsonmuniz16/how-to-make-side-navigation-menu-using-html-and-css-sidebar-menu-design-2p2p
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Robson Muniz

Posted on Mar 3

?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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK