How to create a Sidebar Menu using HTML and CSS

Hey, developers welcome to Day 12 of our 90Days 90Projects challenge. And in Day 12 we are going to create a Sidebar Menu using HTML and CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

sidebar menu html css , sidebar html css template, sidebar html css codepen, css sidebar navigation menu, sidebar in html

HTML Code

index.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> Sidebar Menu </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-container">
        <div class="left-menu">
            <div class="logo">
                <img src="./logo.png" alt="">
                <span><a href="">Geeks Help</a></span>
            </div>
            <ul>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-house"></i> Home </a>
                </li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-user"></i> User </a>
                </li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-file"></i> Files </a>
                </li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-store"></i> Saved </a>
                </li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-calendar-days"></i>
                        Events </a></li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-message"></i> Message
                    </a></li>
                <li class="sidebar-item"><a href="#"><i class="fa-solid fa-chart-line"></i> Analytics </a></li>
                <li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-rocket"></i> Services
                    </a></li>
                <li class="sidebar-item" id="settings"><a class="sidebar-link" href="#"><i class="fa-solid fa-gear"></i>
                        Settings </a>
                <li>
            </ul>
        </div>
        <!-- Right Content Goes here -->
        <div class="right-content"></div>
    </div>
</body>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-container {
    width: 100%;
    height: 100vh;
    background-color: purple;
}

.left-menu {
    background: white;
    position: relative;
    width: 4.5rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all .4s ease;
}

.left-menu:hover {
    width: 13rem;
}

.left-menu ul li a {
    display: flex;
}

.logo {
    width: 80px;
    position: relative;
    top: 1rem;
    left: 0.5rem;
    display: flex;
    margin: 10px 0 0 0px;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 100%;
    z-index: 100;
    position: absolute;

}

.logo span {
    font-weight: bold;
    padding: 10px;
    font-size: 18px;
    text-transform: uppercase;
}

.logo a {
    position: relative;
    left: 180px;
    color: #7410f0;
    font-size: 18px;
    display: table;
    text-align: left;
    width: 300px;
    text-decoration: none;
    padding: 10px;
    font-family: 'Poppins', 'sans-serif';
}

.left-menu ul {
    margin-top: 2rem;
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

ul li {
    font-family: 'Poppins', sans-serif;
    list-style: none;
    margin-bottom: 1rem;
    align-items: center;
    transition: all .3s linear;
}

ul li a {
    padding: 0.5rem;
    color: #7410f0;
    text-decoration: none;
}

ul li a i {
    text-decoration: none;
    color: #7410f0;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .3s linear;
    margin-right: 1.2rem;
}

.sidebar-item i {
    width: 20px;
    height: 20px;
    text-align: center;
}

#settings {
    position: absolute;
    bottom: 1rem;
}

.left-menu ul li:hover {
    transform: translateX(.4rem);
    transition: all .4s linear;
}

.left-menu ul li:hover .fa-solid,
.left-menu ul li:hover a {
    font-weight: bold;
    color: purple;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

4 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Hello,

    if we add content in the div:
    div class right-content
    this inserts it below the menu.
    Is there a class missing in the css?

    ReplyDelete
    Replies
    1. No this is not missing we add it so that if someone try to write the content in the div whose class is "right-content" so that they can select this div in CSS by .right-content. I hope you got the point

      Delete
  2. 'right-content' setting in css is missing

    ReplyDelete
  3. '.sidebar-link' definition is also missing from css list

    ReplyDelete

Top Post Ad

Below Post Ad