Create a CSS-only Off-canvas Menu with Overlay Effect
In this blog post, we will learn how to create a CSS-only off-canvas menu with an overlay effect. This kind of menu is often used in responsive designs to conserve screen space while providing access to all navigation items.
Let’s get started!
Step 1: Write the HTML structure
First, let’s create the HTML structure for our off-canvas menu.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Off-canvas Menu with Overlay</title>
</head>
<body>
<!-- The wrapper will contain our page content and the off-canvas menu -->
<div class="wrapper">
<!-- Off-canvas menu -->
<nav class="off-canvas-menu">
<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>
</nav>
<!-- Page content -->
<div class="page-content">
<header>
<button class="menu-toggle">Menu</button>
</header>
<main>
<h1>CSS-only Off-canvas Menu with Overlay</h1>
<p>Here is our page content...</p>
</main>
</div>
</div>
<!-- Overlay -->
<div class="overlay"></div>
</body>
</html>Step 2: Add the CSS styles
Now that we have the HTML structure, let’s add the CSS styles.
/* CSS */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.off-canvas-menu {
position: absolute;
top: 0;
left: -250px; /* Menu width */
width: 250px;
height: 100%;
background-color: #333;
transition: left 0.3s;
}
.off-canvas-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.off-canvas-menu ul li {
padding: 15px 0;
}
.off-canvas-menu ul li a {
color: #fff;
text-decoration: none;
padding: 0 20px;
}
.page-content {
position: relative;
height: 100%;
transition: transform 0.3s;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.menu-toggle {
position: absolute;
top: 10px;
left: 10px;
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}Step 3: Add the CSS for the active state
We need to add the active state for the off-canvas menu and overlay effect. We will use the :target pseudo-class to achieve this.
/* CSS */
.off-canvas-menu:target {
left: 0;
}
.off-canvas-menu:target ~ .page-content {
transform: translateX(250px); /* Menu width */
}
.off-canvas-menu:target ~ .overlay {
opacity: 1;
pointer-events: auto;
}Step 4: Update the HTML to use the :target pseudo-class
Finally, we need to update our HTML structure to include an ID for the off-canvas menu and modify the menu-toggle button to point to that ID.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Off-canvas Menu with Overlay</title>
</head>
<body>
<div class="wrapper">
<nav class="off-canvas-menu" id="off-canvas-menu">
<!-- ... -->
</nav>
<div class="page-content">
<header>
<button class="menu-toggle"><a href="#off-canvas-menu">Menu</a></button>
</header>
<!-- ... -->
</div>
</div>
<div class="overlay"></div>
</body>
</html>With these changes, our off-canvas menu should now be functional. When you click on the “Menu” button, the off-canvas menu will slide in from the left, and the overlay effect will be visible. Clicking anywhere outside the menu or on the overlay will close the menu.
That’s it! You have successfully created a CSS-only off-canvas menu with overlay effect. Remember that this technique relies on the :target pseudo-class, which may not work in some older browsers. However, it is widely supported in modern browsers and provides a CSS-only solution to create an off-canvas menu with overlay effect.