Off Canvas Nav

Developer
Don Page
Size
3,187 Kb
Views
38,456
  1. Off Canvas Nav Previews
  2. Off Canvas Nav HTML Codes
  3. Off Canvas Nav CSS Codes
  4. Off Canvas Nav JS Codes

How do I make an off canvas nav?

It’s good practice to give the users as much usability as possible. So for this I made it so you can exit the off-canvas-nav multiple ways using jQuery.. What is a off canvas nav? How do you make a off canvas nav? This script and codes were developed by Don Page on 18 July 2022, Monday.

Off Canvas Nav Previews
IQ Test

Off Canvas Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off Canvas Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title>off canvas nav</title> </head> <body> <div id="site-wrapper"> <div id="site-canvas"> <div id="site-overlay"> </div> <a href="#" class="toggle-nav">☰</a> <h2>Off Canvas Navigation</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fermentum non sem id tincidunt. Sed ultrices bibendum turpis, quis mattis urna dictum sit amet. Morbi ultricies eros quam, eget interdum quam auctor in. In eget egestas diam, ac semper nulla. Nullam id suscipit sem. Mauris condimentum ante nec nibh varius dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum scelerisque velit quis nisi lobortis dapibus. Fusce a diam odio. Nulla felis risus, faucibus vel nulla non, cursus sollicitudin urna. Vivamus felis erat, sollicitudin ac orci a, mattis ultricies purus. Suspendisse ut congue eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam aliquet pharetra auctor.</p> <p>Praesent tincidunt faucibus commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at sem vitae leo dignissim consectetur. Integer mollis eros ut ante sagittis, nec imperdiet sem posuere. Aenean fringilla erat et sapien pulvinar, eu fringilla augue laoreet. Suspendisse at neque venenatis, pellentesque justo nec, tincidunt arcu. Praesent eget sapien condimentum, luctus velit sit amet, dapibus magna. Nunc felis lacus, convallis lobortis posuere non, fringilla in lectus. Aliquam vitae elit mollis, imperdiet tortor nec, pulvinar tellus. Cras lacinia sollicitudin consectetur. Pellentesque tristique suscipit augue, a vehicula magna dapibus et. Etiam quis vehicula ipsum. Phasellus gravida aliquam nunc et bibendum. Pellentesque accumsan sem vitae velit fringilla viverra. Duis felis purus, sagittis id commodo vel, volutpat eget arcu. Aenean at gravida justo, id lobortis massa.</p> <div id="site-menu"> <h3>You can close this menu by pressing escape or clicking on the site-canvas.</h3> </div> </div> </div> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Off Canvas Nav - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lobster);
body{ margin: 0;
}
#site-wrapper { position: relative; overflow: hidden; width: 100%; height: 1000px;
}
#site-canvas { width: 100%; height: 100%; position: relative; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: .3s ease all; transition: .3 ease all; padding: 1em; background: #222222;
}
#site-menu { width: 300px; height: 100%; position: absolute; top: 0; left: -300px; background: #DB5800;
}
#site-wrapper.show-nav #site-canvas { -webkit-transform: translateX(300px); transform: translateX(300px);
}
a{ position: absolute; font-size: 40px; color: white; text-decoration: none;
}
p{ font-family: Arial, Helvetica, sans-serif; color: #DB5800; line-height: 1.5; padding: 1%;
}
h2{ font-family: 'Lobster', cursive; font-size: 38px; letter-spacing: 3px; text-align:center; color: #eee;
}
#site-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,.5);
}
h3{ padding: 1em; font-family: Arial, Helvetica, sans-serif;
}

Off Canvas Nav - Script Codes JS Codes

$(function(){ $('#site-overlay').fadeOut('fast'); $('.toggle-nav').click(function(){ $('#site-wrapper').toggleClass('show-nav'); $('#site-overlay').fadeIn('fast');
});
$(document).keyup(function(e) { if (e.keyCode == 27) { //esc key if ($('#site-wrapper').hasClass('show-nav')) { $('#site-overlay').fadeOut('fast'); $('#site-wrapper').toggleClass('show-nav'); } }
});
$('#site-overlay').click(function(){ $('#site-overlay').fadeOut('fast'); $('#site-wrapper').toggleClass('show-nav');
})
});
Off Canvas Nav - Script Codes
Off Canvas Nav - Script Codes
Home Page Home
Developer Don Page
Username DonPage
Uploaded July 18, 2022
Rating 3
Size 3,187 Kb
Views 38,456
Do you need developer help for Off Canvas Nav?

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!

Don Page (DonPage) Script Codes
Name
HTML5 SVG Animations
FadeIn
A Pen by Don Page
Edit Profile with Angular
WordBreaks
Ember Basics
Angular image test
Angular Pen Embed
Typescript Variables
Ember Repeat
Create amazing web content 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!