Side Menu design using HTML CSS JS

In this blog, we will show a sidebar navigation example or side menu design that is made using HTML CSS, and Javascript. For better understanding, I will suggest you follow the below video tutorial. We have over 1000 video tutorials on front-end development on our youtube channel. If you find them useful, consider subscribing to our channel.

I hope you have seen the video tutorial and understand the basics of this project. What is sidebar navigation? side navigation or sidebar is a column of a website that is situated on the left or right side of the website. Lots of useful content of the website like navigation links, social media links, product and service advertisements, etc are shown in that column. Sidebars normally remain fixed on any website. In some websites, it becomes visible when we click on a particular button or link. We will make that kind of a sidenav in our project. We will have a burger icon with text on the top right corner of the webpage. When we will click on that the sidebar column with navigation links will appear from the left. We have added a smooth transition effect so that the side nav will appear smoothly with a sliding effect. There will be a cross icon on the top right side of that sidebar. When we click on that, the side navigation bar will slide out to the left side.

You May also like:

Side menu design using HTML CSS JS [ Source Code ]:

To create this project, you first need to create an HTML and a CSS file. All the Extensions of the file must be properly attached. Then attach the external CSS file to your HTML file. Since the JavaScript library JQuery is used here, add the JQuery CDN or file to your project. Finally, copy the code from the code box below and paste it into your project. If you have any problem with the code below, then download the code by clicking on the download button.

ADD HTML

<!doctype html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Animated Sidebar Navigation</title>
    <link rel="stylesheet" href="style.css">    
</head>
<body>

    <div id="leftMenu">
        <a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">×</a>
        <div class="mainNav">
            <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">portfolio</a>
        <a href="#">services</a>
        <a href="#">blog</a>
        <a href="#">contact</a>
        </div>
    </div>
    <span onclick="openBtn()">☰ Menu</span>
    
    <div class="content">
        <h2>animated <br>Sidebar</h2>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function openBtn()
        {
            document.getElementById("leftMenu").style.width = "250px";
        }

        function closeBtn()
        {
            document.getElementById("leftMenu").style.width = "0";
        }
    </script>
</body>
</html>

ADD CSS:

body {
            font-family: impact;
            background-color: #f6ba09;
        }

        #leftMenu {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #000;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}
        .mainNav {
	margin-top: 70px;
}
        .mainNav a {
	margin-bottom: 15px;
}
        .content {
	display: grid;
	place-items: center;
	height: 100vh;
}
        .content h2 {
	font-family: impact;
	text-align: center;
	text-transform: uppercase;
	font-size: 70px;
}
        #leftMenu a {
	padding: 8px 8px 8px 10px;
	text-decoration: none;
	font-size: 25px;
	color: #fff;
	display: block;
	transition: 0.4s;
	text-align: center;
	text-transform: uppercase;
}
        #leftMenu a:hover {
	color: #fff;
	background: #f6ba09;
}
        #leftMenu .btn-area {
            position: absolute;
            top: 0;
            right: 15px;
            font-size: 40px;
        }

        span {
	position: absolute;
	right: 90px;
	top: 30px;
	font-size: 30px;
	transition: 0.3s;
	cursor: pointer;
	color: #000;
}

Hopefully, you have been able to implement the code properly. We regularly share front-end development source code on this blog. So visit our blog regularly. If you can, then share our blog articles with like-minded people. Learn for yourself and help others to learn. Thank you so much for visiting our blog.

DOWNLOAD CODE

Side menu design using HTML CSS JS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Side Menu design using HTML CSS JS

Side menu design using HTML CSS JS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form