Sidebar Menu with Html CSS JavaScript | Source Coe Template

The Sidebar Menu is the most crucial part of the website or application. It makes it easier for users to navigate between pages. Despite being a crucial part of both the website and the application, sidebar menus may be made with just very simple HTML, CSS, and JavaScript.

Essentially, sidebar menus are navigation bars that, on small-screen devices, morph into sidebars. However, modern smartphones now come with a side navigation menu bar for wide screens.

Source Code Copy Here

HTML Code:

 
        <!DOCTYPE html>
<html lang="en">
<!-- CODE BY CODE DESIGN | HAMMAD RAJPOOT -->
<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 Bar Menu</title>
    <link rel="stylesheet" href="style.css">
    <!-- icon cdn here -->
    <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>
</head>

<body>
    <div class="navigation">
        <ul>
            <li class="list active">
                <a href="#">
                    <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                    <span class="title">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                    <span class="title">Profile</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
                    <span class="title">Message</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
                    <span class="title">Setting</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="help-outline"></ion-icon></span>
                    <span class="title">Help</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="lock-closed-outline"></ion-icon></span>
                    <span class="title" onclick="myfun">Password</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="log-in-outline"></ion-icon></span>
                    <span class="title">Sign Out</span>
                </a>
            </li>
        </ul>
    </div>
     
  

</body>

</html>

CSS Code:

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
body{
    min-height: 100vh;
    background: #fff;
}
.navigation{
    position: fixed;
    top: 20px;
    left: 20px;
    bottom: 20px;
    background: #fc8200;
    width: 300px;
    border-radius: 10px;
    border-left: 5px solid #fc8200;
    box-sizing: initial;
    transition: width 0.5s;
}
.navigation ul{
    position: absolute;
    top: 0;
    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: #fff;
}
.navigation ul li.active a{
    color: #333;
}
.navigation ul li a{
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #fff;
    display: flex;

}
.navigation ul li a .icon{
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    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;

}

JavaScript Code:

    
        // 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';
            }
        }

Sidebar Menu with Html CSS JavaScript | Source Coe Tamplate

Sidebar Menu with Html CSS JavaScript | Source Coe Template

The Sidebar Menu is the most crucial part of the website or application. It makes it easier for users to navigate between pages. Despite being a crucial part of both the website and the application, sidebar menus may be made with just very simple HTML, CSS, and JavaScript.

Essentially, sidebar menus are navigation bars that, on small-screen devices, morph into sidebars. However, modern smartphones now come with a side navigation menu bar for wide screens.

Source Code Copy Here

Post a Comment

Learn HTML in 7 Days: A Beginner's Guide to Creating Websites

Ludo Display UI Design Using Only HTML CSS | With Source Code

Categories

Latest Posts

Popular Posts

Contact Form