Glassmorphism Menu CSS3 and JS

Introduction

Glassmorphism is a popular UI design trend that involves using transparent backgrounds and subtle blending to create a sense of depth and dimensionality on web pages. In this tutorial, we'll show you how to create a stunning glassmorphic menu using only CSS3 and JavaScript.

The Glassmorphism Menu is a CSS-only navigation menu that resembles a translucent glass surface, with buttons and text overlays that seem to float above the surface. This menu is not only visually stunning but also highly customizable and accessible. In this tutorial, we'll walk you through the process of creating this menu from scratch.

Tutorial: Creating a Glassmorphism Menu using CSS3 and JavaScript

Step 1: HTML Structure

To create the menu, we'll start with a basic HTML structure:

<!-- Wrap the menu items in a container -->
<div class="glassmorphism-menu">
  <!-- Navigation menu items -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Step 2: CSS Styling

Create a new CSS file (e.g., style.css) and add the following styles:

.glassmorphism-menu {
  position: relative;
  width: 300px; /* Set the menu width */
  height: 50px; /* Set the menu height */
  background: rgba(255, 255, 255, 0.2); /* Transparent background */
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.glassmorphism-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.glassmorphism-menu li {
  margin: 0 20px;
  padding: 10px;
  position: relative;
}

.glassmorphism-menu li a {
  color: #666;
  text-decoration: none;
}

.glassmorphism-menu li a:hover {
  color: #333;
}

/* Add some styling for the glassmorphism effect */
.glassmorphism-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #fff, transparent);
  transform: translateZ(-1px);
  filter: blur(5px);
  z-index: -1;
}

In this step, we've added some basic styles to our HTML structure, including a transparent background, border, and box-shadow. We've also styled the menu items as flex items and added some spacing between them. The magic happens with the .glassmorphism-menu::before pseudo-element, which creates the glassmorphism effect by applying a linear gradient and blur filter to a transparent background.

Step 3: JavaScript Script

Create a new JavaScript file (e.g., script.js) and add the following code:

// Add event listeners to the menu items
document.querySelector('.glassmorphism-menu ul').addEventListener('mouseover', hoverMenu);
document.querySelector('.glassmorphism-menu ul').addEventListener('mouseout', unhoverMenu);

// Function to animate the menu items on hover
function hoverMenu() {
  this.querySelectorAll('li').forEach((menuItem) => {
    const text = menuItem.querySelector('a');
    text.classList.add('hover');
  });
}

// Function to animate the menu items on mouseout
function unhoverMenu() {
  this.querySelectorAll('li').forEach((menuItem) => {
    const text = menuItem.querySelector('a');
    text.classList.remove('hover');
  });
}

In this step, we've added some basic JavaScript functionality to our menu. We've added event listeners to the menu items to trigger the hover animation on mouseover andmouseout events. We've also defined two functions, hoverMenu and unhoverMenu, to animate the menu items when the user hovers over or away from them. These functions add or remove the .hover class from the menu items' text, which we'll style later.

Step 4: CSS for Hover Effect

Add the following CSS styles to our existing stylesheet:

.glassmorphism-menu li a.hover {
  color: #fff;
  transform: translateY(-5px);
  transition: 0.2s;
}

.glassmorphism-menu li a.hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateZ(-1px);
  filter: blur(5px);
  z-index: -1;
  transition: 0.2s;
}

In this step, we've added some CSS styles to create the hover effect. We've defined the styles for the .hover class, which adds a white color, translates the text up, and transitions the animation smoothly. We've also added styles for the .hover::before pseudo-element, which creates a transparent background with a white opacity.

Step 5: Combine and Test

Combine your HTML, CSS, and JavaScript files, and open the HTML file in your browser. You should now see a beautiful glassmorphic menu that responds to hover events. You can customize the appearance and behavior of the menu by tweaking the CSS and JavaScript code.

That's it! You've now created a stunning glassmorphic menu using only CSS3 and JavaScript. I hope you enjoyed this tutorial and can apply these skills to create more amazing user interfaces.

Conclusion

In this tutorial, we've created a glassmorphic menu using CSS3 and JavaScript. We've covered the basics of creating a basic HTML structure, styling with CSS, and adding interactive functionality with JavaScript. The glassmorphism effect is achieved using the ::before pseudo-element, which creates a transparent background with a white opacity and a blur filter. This effect is enhanced by animating the text on hover using JavaScript and CSS transitions.

I hope you've enjoyed this tutorial and learned something new about creating a glassmorphic menu. If you have any questions or need further assistance, feel free to ask. Happy coding!