How to create a beautiful Sidebar Design Using Html, CSS and JavaScript?

CodewithNizami February 5, 2022

0 2 5 minutes read

Dear friends in this articles we learn about How to create a beautiful Sidebar Design Using Html, CSS and JavaScript. If you like our article then visit more.

Table of Contents

Slidebar Using CSS

A wonderful website design element is a sliding menu. A slide menu is an off-screen element that slides in and out of view when users want it. In general, slide menus use hamburger icons, arrows, text, or other icons to indicate their location. Slide menus allow developers to save precious website space. They also provide an opportunity to add an animation on the sidebar design using html.

A wonderful website sidebar design using html. Element is a sliding menu. A slide menu is an off-screen element that slides in and out of view when users want it. In general, slide menus use hamburger icons, arrows, text, or other icons to indicate their location. Slide menus allow developers to save precious website space. They also provide an opportunity to add an animation.

With HTML, CSS, and sometimes JS, sliding menus can be efficient, engaging, and smooth. The following lists sliding menu examples. There are code pen options for those who want a pure CSS menu and for those who want one with some JS.

This sliding menu imitates a book with tabs that adds 3D effects. When users click on the icon, a menu pops up from the left edge. When users click the icon again it returns to its original state.

HTML for Sidebar

Friends, in this article we will tell you how to create a sidebar design using html css and javascript for any website and we can do that in the dashboard as well. As you know, every dynamic website has a dashboard and we can add any of our menus in it. Whether it is the home of your profile or user profile or whatever be the setting, if your website has a dashboard then we can easily handle any of your links.

And for this reason, today we will tell you how to make a sidebar. First of all, you should know html so that you can easily create any sidebar and implement it in your website. And if you do not have html, then we will refer you to v3school where you can study many languages related to web development. And that too for absolutely free, yes. And the best thing about this site is that you will get the button to try manually, so that after reading, you can run it and see it.

Now we will implement html, so let’s know how to implement it. First of all you have to go to body tag and after that you have to take div tag. And also you have to take class and class name you have to put navigation then you have to take ul tag and in that you have to take list tag, after that you have to take b tag and then take anchor tag in that we will take span tag then take icon. But to use the friends icon, you also have to go to the browser and after going there you will type ionicon and then enter.

Your ionicon website will come in which you will copy its cdn link and put it just above the boy tag in your html code so that your code can run smoothly after that you will go to ion website again and there you go to icon When the search is done, by clicking on the icon, copy its html code, then paste it in your html file.

CSS for Designing

Now we will know how to design sidebar with css. So let’s know that first you have to come to head section and after that you will take style tag then take * tag and in this we will put margin 0 padding also 0 then box sizing border box after that we will take font family poppins and this To use the font, you have to go to the Google Fonts website, from there you have to copy the cdn link and paste it in your style tag. Then you can use this icon. Then we will take the body tag and keep the minimum height 100vh in it, after that we will give it background color rgb.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘poppins’, sans-serif;
}

body{
min-height: 100vh;
background-color: rgb(222, 229, 235);
}

Now we will take a navigation class and keep the position fixed in it, after that we will make it 20px from the top and 20px from the left, after that we will also keep it 20px from the bottom. Then we will take the width 70px and then take the border radius 10px then we will keep the box sizing intial then we will take the background color rgb after that we will keep the solid rgb 5ps from the border left. Then the transition width 0 point will take 5s. And then the overflow will be hidden.

.navigation{
position: fixed;
top: 20px;
left: 20px;
bottom: 20px;
width: 70px;
border-radius: 10px;
box-sizing: initial;
background-color: rgb(29, 29, 31);
border-left: 5px solid rgb(0, 0, 0);
transition: width 0.5s;
overflow: hidden;
,

Source Code..

<!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</title>
    <style>
        /* Google Fonts Link */
        @import url('https://fonts.googleapis.com/css2?family=Kanit&family=Righteous&family=Russo+One&display=swap');
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'poppins', sans-serif;
        }
        body{
            min-height: 100vh;
            background-color: rgb(222, 229, 235);
        }
        .navigation{
            position: fixed;
            top: 20px;
            left: 20px;
            bottom: 20px;
            width: 70px;
            border-radius: 10px;
            box-sizing: initial;
            background-color: rgb(29, 29, 31);
            border-left: 5px solid rgb(0, 0, 0);
            transition: width 0.5s;
            overflow: hidden;
        }
        .navigation.active{
            width: 300px;
        }
        .navigation ul{
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            padding-left: 5px;
            padding-top: 40px;
        }
        .navigation ul li{
            position: relative;
            list-style: none;
            width: 100%;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .navigation ul li.active{
            background: rgb(222, 229, 235);
        }
        .navigation ul li b:nth-child(1){
            position: absolute;
            top: -20px;
            height: 20px;
            width: 100%;
            background-color: rgb(222, 229, 235);
            display: none;
        }
        .navigation ul li b:nth-child(1)::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-bottom-right-radius: 10px;
            background-color: rgb(29, 29, 31);
        }
        .navigation ul li b:nth-child(2){
            position: absolute;
            bottom: -20px;
            height: 20px;
            width: 100%;
            background-color: rgb(222, 229, 235);
            display: none;
        }
        .navigation ul li b:nth-child(2)::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-top-right-radius: 10px;
            background-color: rgb(29, 29, 31);
        }
        .navigation ul li.active b:nth-child(1),
        .navigation ul li.active b:nth-child(2){
            display: block;
        }
        .navigation ul li.active a{
            color: black;
        }
        .navigation ul li a{
            position: relative;
            display: block;
            width: 100%;
            display: flex;
            text-decoration: none;
            color: white;
        }
        .navigation ul li a .icon{
            position: relative;
            display: block;
            min-width: 60px;
            margin-top: 5px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .navigation ul li a .icon ion-icon{
            font-size: 1.5em;
        }
        .navigation ul li a .title{
            position: relative;
            display: block;
            padding-left: 10px;
            height: 60px;
            line-height: 60px;
            white-space: normal;
        }
        .toggle{
            position: fixed;
            top: 29px;
            left: 33px;
            width: 50px;
            height: 50px;
            background-color: rgb(223, 2, 2);
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s;
        }
        .toggle.active{
            background-color: #02b0f5;
            margin-left: 230px;
        }
        .toggle ion-icon{
            position: absolute;
            color: #fff;
            font-size: 34px;
            display: none;
        }
        .toggle ion-icon.open,
        .toggle.active ion-icon.close{
            display: block;
        }
        .toggle ion-icon.close,
        .toggle.active ion-icon.open{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="home-outline"></ion-icon></span>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="people-outline"></ion-icon></span>
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="chatbubble-outline"></ion-icon></span>
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="settings-outline"></ion-icon></span>
                    <span>Setting</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="information-outline"></ion-icon></span>
                    <span>Help</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="lock-closed-outline"></ion-icon></span>
                    <span>Password</span>
                </a>
            </li>
            <li>
                <b></b>
                <b></b>
                <a href="#">
                    <span><ion-icon name="log-out-outline"></ion-icon></span>
                    <span>Sign Out</span>
                </a>
            </li>
        </ul>
    </div>
    <div>
        <ion-icon name="menu-outline"></ion-icon>
        <ion-icon name="close-outline"></ion-icon>
    </div>
    <script>
    let menuToggle = document.querySelector('.toggle');
    let navigation = document.querySelector('.navigation');
     menuToggle.onclick = function(){
         menuToggle.classList.toggle('active');
         navigation.classList.toggle('active');
     }
    //add active class in selected list item
    let list = document.querySelectorAll('.list')
    for(let i = 0; i < list.length; i++){
        list[i].onclick = function(){
            let j = 0;
            while(j < list.length){
                list[j++].className = 'list';
            }
            list[i].className = 'list active';
        }
    }
</script>
<!-- Icons Link -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>