Glassmorphism Sidebar Menu

Glassmorphism Sidebar Menu Using HTML and CSS

Byjvcodes

Designing bright and up-to-date web environments is a best practice in web design, and Glassmorphism is one of those trends that impart a frosted-glass look. This effect contributes to the softer and sophisticated design while at the same time improves the functionality and appearance of the web.

In this post let’s talk about Creating a Glassmorphism Sidebar Menu Using HTML, CSS you can implement in your site.

Moreover, I am sharing the entire source code alongside with this tutorial so that you can easily integrate it to your projects free of cost.

GitHub Source: Glassmorphism Sidebar Menu

Features

Here are some key features of this Glassmorphism Sidebar Menu:

  • Easy to Customize: The code is, therefore, clear with an impressive organization to allow easy tweak of colors, icons, or even layout based on the design requirements.
  • Icons Used: Helps in navigation and provides easy usability, also it gives corporate interface to our site.
  • Compatibility: Is Web 2.0 compatible with all leading browsers, thereby eliminating variation in quality from one platform on to another.
  • Glassmorphism Effect: The sidebar looks superb having a glass look with transparency and blurred background on overlays.
  • Animation Effect: For the sidebar transition smooth animations are used as a measure to make the user interface as elegant as possible.
  • Clean Code: Developed with the clean and easy to follow code which makes the theme suitable for beginners and professionals alike.

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: This should start by copying a new project folder to your computer.
  • Create index.html: When inside the folder, make an index.html file which contains the HTML codes.
  • Create style.css: For the CSS styling, you’ll need to add a style.css file in the same folder.
  • Copy & Paste the Code Below: Paste the following HTML and CSS codes in to your website.

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 charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website Layout | JV Codes</title>
    <!-- Link to external stylesheet for custom styles -->
    <link rel="stylesheet" href="style.css">
    <!-- Link to Font Awesome for icon support -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
  <!-- Main container for sidebar and menu button -->
  <div class="main_box">
    <!-- Checkbox for toggling sidebar visibility -->
    <input type="checkbox" id="check">
    <!-- Menu button to open sidebar (hamburger icon) -->
    <div class="btn_one">
      <label for="check">
        <i class="fas fa-bars"></i> <!-- Icon for menu button -->
      </label>
    </div>
    <!-- Sidebar menu container -->
    <div class="sidebar_menu">
      <!-- Logo section at the top of the sidebar -->
      <div class="logo">
        <a href="#">JV Codes</a>
      </div>
      <!-- Button to close sidebar (X icon) -->
      <div class="btn_two">
        <label for="check">
          <i class="fas fa-times"></i> <!-- Icon to close sidebar -->
        </label>
      </div>
      <!-- Menu items in the sidebar -->
      <div class="menu">
        <ul>
          <li><i class="fas fa-qrcode"></i>
            <a href="#">Dashboard</a>
          </li>
          <li>
            <i class="fas fa-link"></i>
            <a href="#">Shortcuts</a>
          </li>
          <li>
            <i class="fas fa-stream"></i>
            <a href="#">Overview</a>
          </li>
          <li>
            <i class="fas fa-calendar-week"></i>
            <a href="#">Events</a>
          </li>
          <li>
            <i class="fas fa-question-circle"></i>
            <a href="#">About</a>
          </li>
          <li>
            <i class="fas fa-sliders-h"></i>
            <a href="#">Services</a>
          </li>
          <li>
            <i class="fas fa-phone-volume"></i>
            <a href="#">Contact</a>
          </li>
          <li>
            <i class="far fa-comments"></i>
            <a href="#">Feedback</a>
          </li>
        </ul>
      </div>
      <!-- Social media icons at the bottom of the sidebar -->
      <div class="social_media">
        <ul>
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </ul>
      </div>
    </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');

/* Reset and base font styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Main container styling with a full-screen background */
.main_box {
  position: relative;
  background: url('side.jpg') right no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

/* Sidebar menu styling - initially hidden */
.main_box .sidebar_menu {
  position: fixed;
  height: 100vh;
  width: 280px;
  left: -280px;
  background: rgba(0, 26, 255, 0.2); /* Changed to a dark blue-gray with slight transparency */
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); /* Updated shadow to a darker shade */
  overflow: hidden;
  transition: all 0.3s linear;
}

/* Logo section at the top of the sidebar */
.sidebar_menu .logo {
  position: absolute;
  width: 100%;
  height: 60px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow for contrast */
}

/* Logo link styling */
.sidebar_menu .logo a {
  color: #ffd700; /* Gold color for logo text */
  font-size: 25px;
  font-weight: 500;
  position: absolute;
  left: 50px;
  line-height: 60px;
  text-decoration: none;
}

/* Menu container with top padding for spacing */
.sidebar_menu .menu {
  position: absolute;
  top: 80px;
  width: 100%;
}

/* Individual menu items styling */
.sidebar_menu .menu li {
  margin-top: 6px;
  padding: 14px 20px;
}

/* Menu icons with updated color */
.sidebar_menu .menu i {
  color: #ffd700; /* Gold color for icons */
  font-size: 20px;
  padding-right: 8px;
}

/* Menu links styling */
.sidebar_menu .menu a {
  color: #e0e0e0; /* Light gray color for text */
  font-size: 20px;
  text-decoration: none;
}

/* Hover effect for menu items */
.sidebar_menu .menu li:hover {
  border-left: 3px solid #ffd700; /* Thicker gold border on hover */
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.5); /* Gold shadow for a subtle glow effect */
}

/* Social media icons container at the bottom of the sidebar */
.sidebar_menu .social_media {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  list-style: none;
  cursor: pointer;
}

/* Social media icons styling */
.sidebar_menu .social_media i {
  text-decoration: none;
  padding: 0 5px;
  color: #e0e0e0; /* Light gray color for icons */
  opacity: 0.7;
  font-size: 20px;
}

/* Social media icons hover effect */
.sidebar_menu .social_media i:hover {
  opacity: 1;
  transition: all 0.2s linear;
  transform: scale(1.1); /* Slight enlargement on hover */
}

/* Checkbox to control sidebar toggle visibility */
#check {
  display: none;
}

/* Menu button styling (hamburger icon) */
.main_box .btn_one i {
  color: #ffd700; /* Gold color for the hamburger icon */
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  left: 16px;
  line-height: 60px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s linear;
}

/* Close button styling inside sidebar */
.sidebar_menu .btn_two i {
  color: #ffd700; /* Gold color for the close icon */
  font-size: 25px;
  line-height: 60px;
  position: absolute;
  left: 240px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s linear;
}

/* Hover effects for menu and close icons */
.btn_one i:hover {
  font-size: 29px;
}

.btn_two i:hover {
  font-size: 24px;
}

/* Sidebar slide-in effect when checkbox is checked */
#check:checked ~ .sidebar_menu {
  left: 0;
}

/* Hide hamburger icon when sidebar is open */
#check:checked ~ .btn_one i {
  opacity: 0;
}

/* Show close icon inside sidebar when open */
#check:checked ~ .sidebar_menu .btn_two i {
  opacity: 1;
}

Download Source Code

Below is the complete HTML, CSS source code of the Glassmorphism Sidebar Menu. It is free of copyright, so you can use it in any way you want by simply downloading it.

Download Source Code

Conclusion

Among the fancy features that can be implemented on a website, the Glassmorphism Sidebar Menu is a true marvel. Sharing an idea, using this code in your projects will make your design much more engaging, and linking back to JV Source Codes is fair.

Lastly, do not forget to subscribe to the channel for more codes and tutorials. If you have any questions, you can write it in the comments, and I will be glad to respond to you!

Download JV Source Codes

Similar Posts

Navigation Bar with Dark and Light Mode
| | |

Navigation Bar with Dark and Light Mode in HTML, CSS and JavaScript

If you want to add a simple, but a modern and responsive menu bar on your website, the perfect solution is the Navigation Bar with Dark and Light Mode in HTML, CSS, JavaScript. Now, I’ll give you the free source code that has a beautiful navigation bar, has a built-in Dark and Light mode. Not…

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Leave a Reply

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