In this article, I have prepared the free source code for the neumorphic sidebar menu that may be easily adjusted and implemented on your website projects.

Neumorphism Side Bar Menu Using HTML and CSS

Byjvcodes

In web design the sidebar navigation is important as it offers users easy navigation and a more charismatic experience to users. Before you know it, we’re constantly learning something new like today’s feature a Neumorphism Side Bar Menu Using HTML and CSS. It gives the menu a soft, 3D look that is more engaging.

In this article, I have prepared the free source code for the neumorphic sidebar menu that may be easily adjusted and implemented on your website projects.

GitHub Source: Neumorphism Side Bar Menu

Features

  • Neumorphic Design: Smooth and rounded bevels with shades and reflections, similar to buttons and other physical objects.
  • Box Shadow Effects: Both inner shadow and outer shadow create 3D effect where it makes some parts of the interface appear as if they are behind other parts.
  • Transition Effects: On mouse over and click, smooth effects of transitions for links and the icons in the menu which also enhances the fluency of the menu.
  • Easy Navigation: The design has common structure where there is good size of space between various columns and pieces of text so that they can be easy to read and distinguished.
  • Interactive Hover Effects: Hover color effect to the links and icons helps in improving the responsive rate of a user.
  • Toggle Button with Neumorphic Style: The toggle button is also circular with a shadow effect and it also follows the neumorphic design.
  • Smooth Slide-in Animation: The site uses a modern mechanism in the sidebar where it scrolls in from the side, smoothly when clicked.
  • Easy to Customize: It can be customized to any layout and colors in accordance to the designs of the website in place or to the brand in question.
  • Icons Used: Downloadable content, lectures, and other links correspond to the logical structure and have an easily recognizable icon that enhances the appearance of the sidebar.
  • Compatibility: Responsive layout; easily customizable for different devices such as laptops, PCs, tablets, and especially smartphones.
  • Clean Code: The HTML and CSS code is clean and straightforward and beginners will not have a problem in modifying it in any way.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Sidebar Menu

  • Create Project Folder: The first step is to create a folder for storing files related to your project.
  • Create index.html: Add an HTML file with sidebar block and give some details about the structure.
  • Create style.css: Include a CSS file to which the styles of the neumorphic design will be added.
  • Copy & Paste the Code Given Below: Here is the source code below you can use for instant setup.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- Created By JV Codes - www.jvcodes.com -->
<html lang="en" dir="ltr">
  <head>
    <!-- Meta Information -->
    <meta charset="UTF-8">
    <title> Neumorphism Sidebar Menu | JV Codes </title>
    
    <!-- Linking External CSS File for Custom Styles -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Font Awesome Icons Library for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
  <!-- Sidebar Toggle Checkbox -->
  <!-- This checkbox is used to toggle the sidebar visibility when checked -->
  <input type="checkbox" id="check">
  
  <!-- Toggle Button for Opening Sidebar -->
  <label class="button bars" for="check"><i class="fas fa-bars"></i></label>
  
  <!-- Sidebar Container -->
  <div class="side_bar">
    
    <!-- Sidebar Title and Close Button -->
    <div class="title">
      <!-- Brand Logo or Title -->
      <div class="logo">JV Codes</div>
      
      <!-- Toggle Button for Closing Sidebar -->
      <label class="button cancel" for="check"><i class="fas fa-times"></i></label>
    </div>
    
    <!-- Sidebar Navigation Links -->
    <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>
    
    <!-- Social Media Icons Section -->
    <!-- Provides links to social media profiles with Font Awesome icons -->
    <div class="media_icons">
      <a href="https://www.facebook.com/jvcodes"><i class="fab fa-facebook-f"></i></a>
      <a href="https://twitter.com/jvcodes"><i class="fab fa-twitter"></i></a>
      <a href="https://www.instagram.com/help.jvcodes/"><i class="fab fa-instagram"></i></a>
      <a href="https://www.youtube.com/@jvcodes"><i class="fab fa-youtube"></i></a>
    </div>
  </div>
</body>
</html>

CSS

Here is the complete code for style.css file to style the sidebar menu:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* Resetting default margins, padding, and setting the base font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Background color for the main body */
body {
  background: #166afa; /* Updated to a slightly darker shade */
}

/* Sidebar container styling */
.side_bar {
  position: relative;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #0140ad; /* Updated to match the new background */
  padding: 12px;
  box-shadow: -3px -3px 7px #014ed3,
               3px 3px 5px #012158, /* Softer shadow color */
               inset -3px -3px 7px #014ed3,
               inset 3px 3px 5px #012158;
  transition: all 0.5s ease;
}

/* Header section inside the sidebar */
.side_bar .title {
  display: flex;
  justify-content: space-between;
}

/* Logo styling */
.side_bar .title .logo {
  font-size: 27px;
  font-weight: 600;
  color: #ffffff; /* Updated to a more muted dark shade */
}

/* Navigation menu list styling */
.side_bar ul {
  margin-top: 35px;
  list-style: none;
}

/* Sidebar links */
.side_bar ul a {
  color: #ffffff; /* Text color update */
  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 #014ed3,
               3px 3px 5px #001436; /* Softer shadow color */
  position: relative;
  transition: all 0.2s ease;
}

/* Icons within each sidebar link */
.side_bar ul i {
  margin-right: 10px;
}

/* Social media icons container */
.media_icons {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

/* Social media icon buttons */
.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 #014ed3,
               3px 3px 5px #001436; /* Updated shadow color */
  transition: all 0.3s ease;
}

/* Hover effect for sidebar links */
.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 #014ed3,
               inset 3px 3px 5px #001436; /* Softer inset shadow */
}

/* Hover styling for link borders */
.side_bar ul a:hover:before {
  border-radius: 6px;
}

/* Hover effect for rounded media icons */
.media_icons a:hover:before {
  border-radius: 50%;
}

/* Hover color change for sidebar links */
.side_bar ul a:hover {
  color: #6eb6f8; /* Updated to a softer blue */
}

/* Individual colors for social media icons */
.media_icons a:nth-child(1) { color: #87a0d8; } /* Facebook */
.media_icons a:nth-child(2) { color: #00acee; } /* Twitter */
.media_icons a:nth-child(3) { color: #c13584; } /* Instagram */
.media_icons a:nth-child(4) { color: #ff0000; } /* YouTube */

/* Sidebar menu toggle buttons */
label {
  font-size: 17px;
  color: #ffffff; /* Updated to a muted dark shade */
  box-shadow: -3px -3px 7px #014ed3,
               3px 3px 5px #001436;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Toggle button hover effect */
label:hover {
  box-shadow: inset -3px -3px 7px #014ed3,
               inset 3px 3px 5px #001436;
  color: #76bafa; /* Updated to match sidebar link hover color */
}

/* Hide checkbox element */
#check {
  display: none;
}

/* Position for the sidebar menu toggle icon */
.bars {
  position: absolute;
  left: 15px;
  top: 15px;
}

/* Sidebar visibility when checkbox is checked */
#check:checked ~ .side_bar {
  left: 0;
}

Download Source Code

For the entire source code for the Neumorphism Side Bar Menu Using HTML and CSS, follow the link below to download it. The code is not patent of any company or person, so you can use it in your projects with no limitation.

Download Source Code

Conclusion

The Neumorphism Sidebar Menu that has been discussed above can prove to be advantageous to any website. It looks beautiful and modern and helps to improve the design and usability of the menu at the same time.

Just a reminder to link back to JV Source Codes when using the source code for credit and feel free to comment here if you are having any problems.

Download JV Source Codes

Similar Posts

Elastic Animation Navigation Menu Bar
| | |

Elastic Animation Navigation Menu Bar in HTML and CSS

Are you looking for a professional horizontal navigation bar with an animated effect? The Elastic Animation Navigation Menu Bar in HTML, CSS is perfect, thank you very much! What I am going to do for you is to give you the source codes so that you will be able to include a responsive, elegant navigation…

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

Navigation Bar With Page Scroll To Every Section
| |

Navigation Bar With Page Scroll To Every Section in HTML and CSS

Do you want a clean and stylish website with a easy navigation between pages? A cool scroll navigation bar will help you make a great experience for your site. In this article, you’ll find out how to make a Navigation Bar with Page Scroll To Every Section completely free of charge. Here is a wonderful…

Responsive Image Slider
| |

Responsive Image Slider in HTML, CSS and JavaScript

Today’s websites should not only be attractive to look, but also easy to navigate. Another key improvement option that can be used for boosting user experience is the integration of such special features as image sliders. A Responsive Image Slider in HTML, CSS, JavaScript is a perfect and easy-to-use solution to enhance images in a…

Leave a Reply

Your email address will not be published. Required fields are marked *