Off Canvas

Developer
Maria Marica
Size
1,870 Kb
Views
14,168
  1. Off Canvas Previews
  2. Off Canvas HTML Codes
  3. Off Canvas CSS Codes
  4. Off Canvas JS Codes

How do I make an off canvas?

What is a off canvas? How do you make a off canvas? This script and codes were developed by Maria Marica on 26 October 2022, Wednesday.

Off Canvas Previews
IQ Test

Off Canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off Canvas</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="drawer" class="green"></nav>
<main class="blue"></main> <script src="js/index.js"></script>
</body>
</html>

Off Canvas - Script Codes CSS Codes

html, body, main {width: 100%; height:100%;}
.blue { background: #4682B4;
}
.green { background: #2E8B57;
}
nav{width: 300px; height:100%; position: absolute; -webkit-transform: translate(-300px, 0); transform: translate(-300px, 0); transform: translate(-300px, 0); transition:transform 0.3s ease;}
nav.open {-webkit-transform: translate(0, 0); transform: translate(0.0);}
@media screen and (min-width:600px) { nav{position:relative; transform:translate (0,0); } body {display:flex; flex-flow: row nowrap; } main{width: auto; flex-grow:1;}
}

Off Canvas - Script Codes JS Codes

menu.addEventListener('click', function(e) { drawer.classList.toggle('open'); e.stopPropagation();
});
Off Canvas - Script Codes
Off Canvas - Script Codes
Home Page Home
Developer Maria Marica
Username mariamarica
Uploaded October 26, 2022
Rating 3
Size 1,870 Kb
Views 14,168
Do you need developer help for Off Canvas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maria Marica (mariamarica) Script Codes
Name
Tribute page
Column Drop
Calculator
Project lalala
Mostly Fluid
Portfolio
Dropdown navbR
A Pen by Maria Marica
Dr. Love
Quote gen
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!