29
Neumorphism Sidebar Menu Using HTML and CSS
In this tutorial, I will show you how to create a Neumorphism Sidebar Menu using HTML and CSS programming code. In the meantime I have shown how to create many types of web elements of Neumorphism design. Here I will show you how to create sidebar menu using HTML and CSS programming code. In this case I have used HTML code to create the structure of this sidebar. I designed it using css code and added Neumorphism design in it.
Every menu item here has a Hover effect on it. Under normal circumstances, the menu items seem to be a bit on the front. I have used CSS code to do this.
I added icons to each menu item. Which makes this design look even more beautiful and attractive. If you want to know how I made the design then follow the tutorial below.
You create an HTML file to which you add the following structure. The following structure is only the basic structure of this sidebar.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<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>Document</title>
<style>
</style>
</head>
<body>
<!-- Open & close btn -->
<div class="sidebar">
<!--image & Title -->
<!--Menu item -->
<!-- Social Icon -->
</div>
</body>
</html>Add the css code below to design it.
First of all, under normal circumstances, this sidebar -250px is placed on the left, which means that under normal circumstances, the sidebar cannot be seen completely. When you click on the open button, the lift will be zero, meaning the sidebar will be visible. You can see I used
left: -250px. After all, I usedleft 0when activating the open button(#check: checked ~ .sidebar{left: 0;})That means the sidebar can be seen completely.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
height: 700px;
background: #dde1e7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sidebar {
left: -250px;
width: 250px;
position: absolute;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
background: #dde1e7;
transition: all 0.5s ease;
}
First of all, I added a profile image. The following HTML and CSS helped to add and design those profile images. You can change the image if you want by changing the url of the image. I have added a title to it.
<header>
<img src="img.jpg">
<p>Foolish Developer</p>
</header>.sidebar header {
text-align: center;
line-height: 30px;
font-size: 24px;
color: rgb(57, 57, 57);
background: #dde1e7;
font-family: Verdana, Geneva, Tahoma, sans-serif;
user-select: none;
}
.sidebar header p {
padding: 15px;
}
.sidebar header img {
border-radius: 50%;
width: 120px;
height: 120px;
box-shadow:
0px 0px 2px #5f5f5f,
0px 0px 0px 7px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff
;
}
The following codes help to add menu items in the sidebar. In this case I have used seven menu items. You can increase or decrease these items further if you wish.
You will see that I have added an icon in front of each item. To make those icons work, I have added the font awesome cdn link to the head fiction of the HTML file. If you've seen the demo, you'll realize that each menu item is slightly up front.
<ul>
<li><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-desktop"></i>Service</a>
<li><a href="#"><i class="fa fa-eye"></i>Overview</a></li>
<li><a href="#"><i class="fa fa-book"></i>Event</a></li>
</li>
<li><a href="#"><i class="fas fa-user-shield"></i>Contact</a></li>
<li><a href="#"><i class="fa fa-link"></i>Shortcuts</a></li>
</ul>.sidebar ul a {
font-size: 18px;
color: rgb(68, 68, 68);
padding-left: 40px;
display: block;
height: 100%;
width: 100%;
line-height: 56px;
box-sizing: border-box;
margin-top: 12px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
font-family: Verdana, Geneva, Tahoma, sans-serif;
transition: 0.4s;
}
.sidebar ul a i {
margin-right: 16px;
}
/* hover effect */
ul li:hover a {
padding-left: 70px;
color: rgb(0, 158, 216);
box-shadow: inset -1px -1px 2px #dde1e7;
}
This time we will add the icons on social media. Basically in this case I have added four social-media-icons. In which I have added Ami Neumorphism design using CSS code. The following HTML and CSS code helped to create and design these social icons.
<li>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</li>/* Social Links */
.social-links i {
color: rgb(4, 61, 118);
background: #dde1e7;
font-size: 20px;
padding: 10px;
margin-left: 16px;
margin-top: 10px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
}
/* icons hover effect */
.social-links i:hover {
color: rgb(0, 170, 255);
}
So far we have only designed this Neumorphism sidebar. Now we will add open and close buttons. Which can be used to open and hide again.
<input type="checkbox" id="check">
<label for="check">
<i class="fa fa-bars" id="btn"></i>
<i class="fa fa-times" id="cancle"></i>
</label>#check {
display: none;
}
label #btn,
label #cancle {
color: rgb(4, 145, 216);
border-radius: 3px;
position: absolute;
cursor: pointer;
background: #dde1e7;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
}
#cancle {
font-size: 30px;
color: #0a5275;
z-index: 1111;
left: -195px;
top: 17px;
padding: 4px 9px;
transition: all 0.5s;
}
label #btn {
left: 40px;
top: 25px;
font-size: 35px;
color: rgb(14, 186, 243);
padding: 6px 12px;
transition: all 0.5s;
}
As I showed above here we have added the Open and Close button. Now I will use the following CSS code to activate that button.
#check:checked ~ .sidebar {
left: 0;
}
#check:checked ~ label #btn {
left: 250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancle {
left: 245px;
}
#check:checked ~ section {
margin-left: 250px;
}
Hope you learned from this tutorial how I created sidebar menu of this Neumorphism design using html and css. Please comment on how you like this design.
29