DEV Community

loading...
Cover image for Neumorphism Sidebar Menu Using HTML and CSS

Neumorphism Sidebar Menu Using HTML and CSS

Foolish Developer
・5 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Create the basic structure of the sidebar

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>
Enter fullscreen mode Exit fullscreen mode
.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
;
}


Enter fullscreen mode Exit fullscreen mode

Add a profile image

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Add and design menu items

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>
Enter fullscreen mode Exit fullscreen mode
/* 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);
}
Enter fullscreen mode Exit fullscreen mode

Add social media icons

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>
Enter fullscreen mode Exit fullscreen mode
#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;
}

Enter fullscreen mode Exit fullscreen mode

Create open and close buttons

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;
}
Enter fullscreen mode Exit fullscreen mode

Activate the button in Open and Close

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.

Discussion (4)

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

nice work, 👍

Collapse
cristoferk profile image
CristoferK

Nice design!

Collapse
code_mystery profile image
Foolish Developer Author

Thank You

Some comments have been hidden by the post's author - find out more