Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an off-canvas menu with CSS and JavaScript?
An off-canvas menu is a sidebar navigation that slides in from the side of the screen when activated. This design pattern is popular in responsive web design as it saves screen space while providing easy access to navigation links.
Off-canvas menus are particularly useful for mobile devices and websites with numerous navigation items that don't fit in a traditional horizontal navigation bar. They can slide from left-to-right or right-to-left, and often overlay or push the main content aside.
HTML Structure
First, create the HTML structure with a sidebar navigation and main content area:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Off-Canvas Menu</title>
</head>
<body>
<div id="mySide-nav" class="side-nav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<span style="font-size: 30px; cursor: pointer" onclick="openNav()">?</span>
<h2>Off-Canvas Menu Demo</h2>
<p>Click the hamburger menu (?) to open the sidebar navigation.</p>
<p>This content will be hidden when the menu opens, creating a full overlay experience.</p>
</div>
</body>
</html>
CSS Styling
The CSS handles the visual appearance and smooth animations for the menu:
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3cc688;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
font-weight: bold;
}
.side-nav a:hover {
color: #ff6b6b;
}
.side-nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
#main span:hover {
color: #3cc688;
}
@media screen and (max-height: 450px) {
.side-nav {
padding-top: 15px;
}
.side-nav a {
font-size: 18px;
}
}
</style>
JavaScript Functionality
JavaScript controls the opening and closing of the off-canvas menu:
<script>
function openNav() {
document.getElementById("mySide-nav").style.width = "250px";
document.getElementById("main").style.display = "none";
}
function closeNav() {
document.getElementById("mySide-nav").style.width = "0";
document.getElementById("main").style.display = "block";
}
</script>
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Off-Canvas Menu</title>
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3cc688;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
font-weight: bold;
}
.side-nav a:hover {
color: #ff6b6b;
}
.side-nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
#main span:hover {
color: #3cc688;
}
@media screen and (max-height: 450px) {
.side-nav {
padding-top: 15px;
}
.side-nav a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mySide-nav" class="side-nav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<span style="font-size: 30px; cursor: pointer" onclick="openNav()">?</span>
<h2>Off-Canvas Menu Demo</h2>
<p>Click the hamburger menu (?) to open the sidebar navigation.</p>
<p>This content will be hidden when the menu opens, creating a full overlay experience.</p>
</div>
<script>
function openNav() {
document.getElementById("mySide-nav").style.width = "250px";
document.getElementById("main").style.display = "none";
}
function closeNav() {
document.getElementById("mySide-nav").style.width = "0";
document.getElementById("main").style.display = "block";
}
</script>
</body>
</html>
How It Works
The off-canvas menu uses CSS transitions to smoothly animate the width from 0 to 250px. When opened, the main content is completely hidden using display: none. The menu overlay covers the entire screen, creating a focused navigation experience.
The hamburger icon (?) serves as the trigger button, while the × symbol provides an intuitive way to close the menu. CSS media queries ensure the menu remains usable on smaller screens.
Key Features
- Smooth Animation: CSS transitions provide smooth opening and closing effects
- Responsive Design: Media queries adapt the menu for different screen sizes
- Full Overlay: Main content is hidden when menu is open for better focus
- Hover Effects: Interactive feedback when hovering over menu items
Conclusion
Off-canvas menus provide an elegant solution for navigation in modern web design. This implementation combines CSS animations with JavaScript functionality to create a smooth, user-friendly sidebar that works across different devices and screen sizes.
1K+ Views
