Neumorphism Sidebar Menu Using HTML and CSS

#html #css #javascript #webdev

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.

Watch the live demo to learn how this sidebar works. Everything here is like a normal side bar menu. I added everyone's first profile image and a title below it. Below that I have added a lot of menu items. Below all I have made four social-media-icons. There is a cancel button which when clicked will hide the menu bar. There is a button on the homepage which, when clicked, will bring up the menu again.

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.

Step 1: Create the basic structure of the sidebar

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 used left 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;
}

Step 2:Add a profile image

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
;
}

Step 3: Add and design menu items

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;
}

Step 4: Add social media icons

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);
}

Step 5: Create open and close buttons

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;
}

Step 6: Activate the button in Open and Close

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;
}

Related Post:

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.

Top comments (5)

Comment hidden by post author - thread only accessible via permalink

Tom • Jul 1 '21 • Edited

Many flaws in your code:

You shouldn't use "transition: all"
You shouldn't animate "left". Use "transform: translateX()" instead and "transition: transform"
You set every size with pixels. If you decide to change sidebar width at some point you have to also change other values every time. Otherwise your design will brake. Use % whenever possible.
Try not to use id as selectors to avoid high specificity. Use classes instead.