A fullscreen overlay menu is a modern and sleek way to enhance your website’s navigation. It adds an interactive, dynamic look and works seamlessly across devices. In this blog post, we’ll guide you through creating a beautiful fullscreen overlay menu with a hamburger icon toggle using HTML, CSS, and JavaScript.
Video Tutorial:
If you’d like a step-by-step walkthrough, check out the video tutorial below! It visually explains how to create this fullscreen overlay menu, covering everything from HTML structure to CSS styling and JavaScript functionality. Perfect for those who prefer learning by watching!
HTML Structure
We’ll begin by defining the structure for the hamburger menu and the fullscreen overlay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fullscreen Overlay Menu</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hamburger" id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="overlay" id="menuOverlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
- The
.hamburgeris the clickable icon with three bars. - The
.overlayis the fullscreen menu that appears when the hamburger icon is click
Styling the Menu with CSS
We’ll use CSS to design the hamburger icon, the fullscreen overlay, and the menu items.
body { margin: 0; font-family: "Poppins", sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .hamburger { position: fixed; top: 20px; right: 20px; width: 30px; cursor: pointer; z-index: 1001; } .hamburger div { width: 100%; height: 4px; background-color: #333; margin: 4px; transition: all 0.3s ease; } .hamburger.active div:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active div:nth-child(2) { opacity: 0; } .hamburger.active div:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); color: #ffffff; display: flex; justify-content: center; align-items: center; flex-direction: column; transform: translateY(-100%); transition: transform 0.5s ease; z-index: 1000; } .overlay.active { transform: translateY(0); } .overlay ul { list-style: none; padding: 0; margin: 0; text-align: center; } .overlay ul li { margin: 20px 0; } .overlay ul li a { text-decoration: none; color: #ffffff; font-size: 24px; font-weight: bold; transition: color 0.3s ease; } .overlay ul li a:hover { color: #3d91f5; }Key Features:
- Hamburger Icon Animation: The three bars transform into a cross when clicked.
- Overlay Animation: The fullscreen menu slides down smoothly with a transition effect.
- Hover Effect: Menu items change color when hovered.
Adding Functionality with JavaScript
We’ll now write a simple script to toggle the overlay and animate the hamburger icon.
const hamburger = document.getElementById("hamburger");
const overlayMenu = document.getElementById("menuOverlay");
// Toggle menu on hamburger click
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
overlayMenu.classList.toggle("active");
});
// Close menu when clicking outside the menu items
overlayMenu.addEventListener("click", (e) => {
if (e.target === overlayMenu) {
hamburger.classList.remove("active");
overlayMenu.classList.remove("active");
}
});
Explanation:
- Hamburger Toggle: Clicking the icon adds or removes the
.activeclass, triggering CSS animations. - Close on Outside Click: The menu closes if you click outside the menu links.
How It Works
- The hamburger icon toggles the
.activeclass, triggering the animation for both the icon and the overlay menu. - The overlay menu slides into view, presenting navigation options.
- Clicking anywhere outside the menu links or toggling the icon again closes the menu.
Final Thoughts
The fullscreen overlay menu is a great addition to any modern website. It’s simple to implement, mobile-friendly, and visually appealing. With just HTML, CSS, and JavaScript, you can elevate the user experience on your site.
Start coding this overlay menu and let your creativity shine! 🚀
