In this article, you will learn how to create sidebar menus of Neumorphism design using HTML and CSS programming code. Earlier I designed many more types of sidebar menus using HTML, CSS, and JavaScript programming code.
The side menu bar is a significant element of the website. Currently, the sidebar menu is being used along with the menu bar on various websites. Currently, Neumorphism design is much more used in the case of websites. Neumorphism design is interesting enough and it is much easier to build which is very easy to build using CSS code.
In the meantime, I have created many elements using Neumorphism design. In this design, I have used HTML and CSS programming code. In this case, I have created the structure of this side menu bar using HTML programming code. I designed it using CSS code.
Live Demo of Neumorphism Sidebar Menu
If you want to know how this sidebar menu works then you must see the demo below. First of all, I used the profile image [logo] here. I have used a title below that profile image. Basically in this case you can use your website or your brand name.
Below that, I have used many menu items and used an icon with each item. Using the icons makes each menu look much more interesting. Here you can add as many menu links as you need. Below all, I have added icons to social media here.
In this case, I have used four social icons. You can change these social icons as you wish. Under normal circumstances, if you see every menu item is slightly upwards. When you click on it the text will move slightly to the left.
See the Pen by Foolish Developer (@fghty) on CodePen.
Hopefully from the demo above you know how this sidebar menu works. As you can see, this is a nice sidebar menu that includes profile images, titles, menus, everything on social media. In a word, it is a remarkably beautiful Neumorphism sidebar menu.
In this case, there is a cancel button. Under normal circumstances, no menu bar can be seen on the page. There is a button on the home page. Clicking on that button will show the full menu. This sidebar has a cancel button which when clicked will again hide the entire menu bar.
I hope you like this design. If you want the source code of this design, you can copy the required code from the demo section above. You can also download the code using the download button below.
Neumorphism Sidebar Menu Using HTML & CSS
If you are a beginner and want to know step by step how I created this sidebar menu then you must follow the tutorial below. In this tutorial below you are going to learn how I created this Neumorphism sidebar menu with the help of HTML and CSS code. You need to have an idea about basic HTML and CSS to create this design.
Step 1: Create sidebar basic structure
First of all, you create an HTML file then copy the HTML structure below and paste it into that HTML file. The following structure is basically the basic HTML structure of this bar.
<!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">
<!--Header(text,img)-->
<!--Menu item-->
</div>
<section><!-- You can add text, content, img here ! --></section>
</div>
</body>
</html>
Step 2: Design the basic structure with the help of CSS code
The following CSS code was originally used to design the basics of this sidebar menu. In this case, I used the color # dde1e7 in the background. Let me tell you, I designed the entire sidebar using this # dde1e7 color. This means that the background color of the sidebar, the menu item has been used in each case.
Sidebar width: 250px and position: absolute. In this case transition: all 0.5s ease has been used, which means that when you activate the menu bar, it will take 0.5 seconds for it to appear. As I said above, this sidebar is completely hidden under normal conditions and the sidebar will be visible when you click on it. For this I left the sidebar: 250px.
That is, it cannot be seen under normal circumstances. Because I used the width of the bar 250 px and moved it to the left -250 px this way it is completely hidden. If you increase the width of the sidebar, you must increase the amount left.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
background-position: center;
height: 700px;
background: #dde1e7;
background-size: cover;
background-repeat: no-repeat;
}
/* active side bar */
.sidebar {
left: -250px;
width: 250px;
position: absolute;
background: #dde1e7;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
transition: all 0.5s ease;
}
Step 3: Add profile image text in the menu bar
As you can see in the demo above, first of all here I used a profile image and some titles. The following HTML and CSS programming codes have helped to create these titles and profile images. In this case, you can change the image as you need. Below I have used the URL of the image where you can use the URL of the profile image of your choice.
<header>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9imbMonelPSuLGiyzNAlXu6G0ihiaWp8rH6tXMReupGFlzIhBZeiyurj6JrvH56KdVz8gJE5xUzIORBdxqnoyoLnAbIDkfgpUrikj0CYb-UuRKMibLAP5cChDfSapoXgTcSR9kNb0jk/s16000/team-1-2.jpg">
<p>Foolish Developer</p>
</header>
The CSS code below has helped to design the profile image and title added above. I used border-radius: 50% to make the profile image completely round. You can increase or decrease this percentage if you want to convert it to other sizes.
I have kept the length and height of this image equal to 120px. If you want to increase the size of your picture, you can increase this number. If you look at the profile image you will notice that a border has been used around this image which has made it even more interesting. I used box-shadow for this border.
.sidebar header {
line-height: 30px;
background: #dde1e7;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 24px;
color: rgb(57, 57, 57);
text-align: center;
user-select: none;
}
.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
;
}
.sidebar header p {
padding: 15px;
}
Step 4: Add and design menu items in the sidebar
In this sidebar, I have basically added seven menu items. The following HTML code has helped to enhance its structure. Of course, to activate these icons, you will add the CDN link of font-awesome in the body tags of your HTML file.
<ul>
<li><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-link"></i>Shortcuts</a></li>
<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><a href="#"><i class="fa fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-desktop"></i>Service</a></li>
<li><a href="#"><i class="fas fa-user-shield"></i>Contact</a></li>
</ul>
The CSS code below has helped to design the menu items added above. As I said before, Neumorphism design has been added to each menu item so that the menu items seem to have moved up a bit. Box-shadow has been used for this. I have used line-height: 56px here.
Hover has been added to each menu item, meaning that when you click on the item, the menu icon and menu link will move slightly to the left. For this, I have used padding-left: 70 px. This time we will add it to social media.
.sidebar ul a {
display: block;
color: rgb(68, 68, 68);
padding-left: 40px;
box-sizing: border-box;
height: 100%;
width: 100%;
line-height: 56px;
font-size: 18px;
margin-top: 12px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
transition: 0.4s;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(128, 135, 148, 0.562);
}
.sidebar ul a i {
margin-right: 16px;
}
/* hover effect */
ul li:hover a {
padding-left: 70px;
color: rgb(0, 158, 216);
}
Step 5: Add Social in Neumorphism sidebar
In this case, I have basically added four icons to social media. You can add icons of your choice here on social media. I have added icons to social media using the following HTML codes.
If you have noticed then you will see that among the icons here I have used a Neumorphism design like a menu item. I used the front side of the icons as 20 px and the background color as rgb (0, 170, 255).
<li>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</li>
/* Social Links */
.social-links i {
padding: 10px;
color: rgb(4, 61, 118);
background: #dde1e7;
font-size: 20px;
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);
}
Step 6: Spell two buttons (open, close)
In this case, I made two buttons using the check box. Originally one button was used to open the sidebar and the other to hide the menu bar. I created and designed those two buttons using the HTML and CSS code below.
<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);
}
label #btn {
color: rgb(14, 186, 243);
padding: 6px 12px;
left: 40px;
top: 25px;
font-size: 35px;
transition: all 0.5s;
}
#cancle {
font-size: 30px;
color: #0a5275;
padding: 4px 9px;
z-index: 1111;
left: -195px;
top: 17px;
transition: all 0.5s;
}
Step 7: Activate the two buttons in the menu bar
So far we have designed the full menu bar but have not activated these buttons. To activate you need to add some CSS code and determine what kind of effect will be in the sidebar when that button is clicked.
#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;
}
Hopefully, in this tutorial, you have learned how to create this Neumorphism sidebar menu using only HTML and CSS code.
If you want to build a site using JavaScript programming code, you can definitely look at other designs. Please comment with your opinion about this tutorial.
