Hello guys, Today in this blog I’m going to create a sidebar menu in neumorphism style I sure you will love this, in an earlier blog I have to share Drop-down Sidebar Menu in HTML CSSÂ and now I’m going to create a neomorphic sidebar using only HTML & CSS.
Generally, we can say a sidebar is a bar that is placed on the right or left top side of the webpage and it works from one button. The sidebar has various hyperlinks that help the user to quickly move within the page as they want. Mostly sidebar is used in small screen devices like tablets, mobile. In this context, the sidebar has become the most essential part of the website. The sidebar can be placed on the right side or left side of the page.
As you can see in the given image of the neumorphism sidebar, on the top left side there is a logo named “CodingLab” and one cancel button right side of this sidebar. At the bottom of this logo there are some hyperlinks with icons for making users convenient and also you can see at the bottom of the sidebar the are some social media icons.
Actually, at first, there is only one button placed on the top left side of the corner and when we clicked on that button sidebar appears from the left side to the right side his sliding animation also when you can hover the hyperlinks button looks like the have pressed.
If you guys are feeling difficulties understanding this program [Neumorphism Side Bar Menu], I have to provide a full video tutorial about this program, I sure your confusion will be clear after watching this video.
Video of Neumorphism Side Bar Menu using HTML & CSS only
As you have seen in the video, In first there is one button in the top left corner of the webpage. when we clicked on this button side appears with sliding animation from the left side to the right side which looks really amazing and also did you notice? the first button disappears and the cancel button appears. Basically, the First button on the webpage is used to enable the sidebar and the cancel button is used for closing the sidebar. Also then we hover the hyperlinks button looks like they have pressed actually I have done it by box-shadow property.
Guys if you are familiar with HTML & CSS you can easily create this sidebar and also if you have knowledge about JavaScript then you can add more functionality as you like. Those who are feeling difficulties creating this sidebar don’t worry I have provided source code files of this program [Side Bar Menu]. You can use this sidebar as your purpose.
You Might Like This:
Neumorphism Sidebar Menu | Source Codes
Firstly, to copy the given codes of this program [Neumorphism Side Bar Menu ], you need to create two files one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes. You can also download all source code files of this program [ Side Bar Menu in Neumorphism Design ] directly from the given “Download Button”.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Neumorphism Sidebar Menu | CodingLab </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<input type="checkbox" id="check">
<label class="button bars" for="check"><i class="fas fa-bars"></i></label>
<div class="side_bar">
<div class="title">
<div class="logo">CodingLab</div>
<label class=" button cancel" for="check"><i class="fas fa-times"></i></label>
</div>
<ul>
<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
<li><a href="#"><i class="fas fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
<li><a href="#"><i class="fas fa-phone-volume"></i>Contact</a></li>
<li><a href="#"><i class="fas fa-comments"></i>Feedback</a></li>
</ul>
<div class="media_icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #ecf0f3;
}
.side_bar{
position: relative;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
background: #ecf0f3;
padding: 12px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1,
inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
transition: all 0.3s ease;
}
.side_bar .title{
display: flex;
justify-content: space-evenly;
}
.side_bar .title .logo{
font-size: 27px;
font-weight: 600;
color: #31344b;
}
.side_bar ul{
margin-top: 35px;
list-style: none;
}
.side_bar ul a{
color: #31344b;
text-decoration: none;
display: block;
margin-top: 12px;
font-size: 18px;
font-weight: 400;
padding : 10px 25px;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
position: relative;
transition: all 0.2s ease;
}
.side_bar ul i{
margin-right: 10px;
}
.media_icons{
margin-top: 50px;
display: flex;
justify-content: center;
}
.media_icons a{
position: relative;
margin: 0 4px;
font-size: 17px;
cursor: pointer;
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
text-decoration: none;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
transition: all 0.3s ease;
}
.side_bar ul a:hover:before,
.media_icons a:hover:before{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.side_bar ul a:hover:before{
border-radius: 6px;
}
.media_icons a:hover:before{
border-radius: 50%;
}
.side_bar ul a:hover{
color: #3498db;
}
.media_icons a:nth-child(1){
color: #4267b2;
}
.media_icons a:nth-child(2){
color: #1da1f2;
}
.media_icons a:nth-child(3){
color: #e1306c;
}
.media_icons a:nth-child(4){
color: #ff0000;
}
label{
font-size: 17px;
color: #31344b;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
height: 37px;
width: 37px;
border-radius: 50%;
text-align: center;
line-height: 37px;
cursor: pointer;
transition: all 0.3s ease;
}
label:hover{
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
color: #3498db;
}
#check{
display: none;
}
.bars{
position: absolute;
left: 15px;
top: 15px;
}
#check:checked ~ .side_bar{
left: 0;
}
If you face any difficulties while creating your Neumorphism Sidebar Menu or your code is not working as expected, you can download the source code files for this Neumorphism Side Navigation Menu Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
