Off Canvas

Developer
Size
1,870 Kb
Views
14,168

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

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
Create amazing captions 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!