Hello readers, Today In this article I am going to show you how to create a Responsive Sidebar Menu With Curved Outside Effect Using HTML, CSS & JavaScript. This type of Responsive Sidebar Menu is used on the websites for the sidebar navigation menu. One of the most beautiful and good-looking designs of a navigation menu is the ‘Curve outside in Active Tab’ design.
You easily create a Responsive Sidebar Menu With Curved Outside Effect Using HTML, CSS & JavaScript then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and JavaScript, then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Responsive Sidebar Menu
Normally show sidebar menu left side and toggle button top right corner as you can see on the image. An outside curve is the rounded outward corner through which we connect our active element to any other element of the document. when clicking the toggle button the navbar item name expands.
Watch the video tutorial to create Responsive Sidebar Menu
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Responsive Sidebar Menu With Curved Outside Effect step by step completely beautifully. So you can learn how to make this curved active tab in the navigation bar. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Sidebar Menu With Curved Outside Effect Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Footer Design using HTML & CSS
- Responsive Pricing Card using HTML, CSS & JS
- 30 Free CSS Login Forms For Your Website 2021
Sidebar Menu | Source Codes
You have to create an HTML, CSS & JS File For this Sidebar Menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curve Outside in Active Tab | Sidebar Menu</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation">
<ul>
<li class="list active">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
<span class="title">Home</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="person-outline"></ion-icon></span>
<span class="title">Profile</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span class="title">Message</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
<span class="title">Setting</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
<span class="title">Help</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="lock-closed-outline"></ion-icon></span>
<span class="title">Password</span>
</a>
</li>
<li class="list">
<b></b>
<b></b>
<a href="#">
<span class="icon"><ion-icon name="log-out-outline"></ion-icon></span>
<span class="title">Sign Out</span>
</a>
</li>
</ul>
</div>
<div class="toggle">
<ion-icon name="menu-outline" class="open"></ion-icon>
<ion-icon name="close-outline" class="close"></ion-icon>
</div>
<!----Font Icon---->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<!----JS CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom File---->
<script src="js.js"></script>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700;800;900&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;
width: 70px;
border-radius: 10px;
box-sizing: initial;
border-left: 5px solid #4d5bf9;
background: #4d5bf9;
transition: width 0.5s;
overflow-x: hidden;
}
.navigation.active{
width: 300px;
}
.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 b:nth-child(1) {
position: absolute;
top: -20px;
height: 20px;
width: 100%;
background: #fff;
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: 20px;
background: #4d5bf9;
}
.navigation ul li b:nth-child(2) {
position: absolute;
bottom: -20px;
height: 20px;
width: 100%;
background: #fff;
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: 20px;
background: #4d5bf9;
}
.navigation ul li.active b:nth-child(1),
.navigation ul li.active b:nth-child(2) {
display: block;
}
.navigation ul li a {
position: relative;
display: block;
width: 100%;
display: flex;
text-decoration: none;
color: #fff;
}
.navigation ul li.active a{
color: #333;
}
.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;
}
.toggle{
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #4d5bf9;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.toggle.active{
background: #ff4d89;
}
.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;
}the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
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';
}
}now you’ve successfully created these Responsive Pricing Sidebar Menu Using HTML, CSS & JavaScript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
