OffCanvas Navigation Menu

Developer
Size
5,757 Kb
Views
24,288

How do I make an offcanvas navigation menu?

Responsive Offcanvas Navigation Menu built with Sass, Compass and Jquery... What is a offcanvas navigation menu? How do you make a offcanvas navigation menu? This script and codes were developed by Mithicher on 12 August 2022, Friday.

OffCanvas Navigation Menu Previews

OffCanvas Navigation Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>OffCanvas Navigation Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="site__container">	<div class="site__pusher">	<header id="navbar" class="navbar navbar__fixed">	<div class="navbar__container">	<ul>	<!-- Toggle Icon viewed only in mobile/tablet -->	<a href="#" class="navbar__toggle-icon" id="navbar__toggle-icon"></a>	<!--	Just remove the content inside navbar__logo if you	dont want to add any logo	-->	<a href="#" class="navbar__logo">OffCanvas.</a>	</ul>	<nav class="menu">	<ul class="menu-pull-right">	<li><a href="#">Home</a></li>	<li><a href="#">About</a></li>	<li class="active"><a href="#">Services</a></li>	<li><a href="#">Blog</a></li>	<li><a href="#">Contact</a></li>	</ul>	</nav>	</div>	</header><!-- /header -->	<section class="main-content padding-tb">	<section class="container">	<h2>Off-Canvas Responsive Navigation Menu</h2>	<p class="lead">Build With Sass, Compass and jQuery</p>	<p>*Note: I have not tested this on Mobile Phones...Tested with browser Developers Tools.</p>	</section>	<footer class="footer padding-tb">	<div class="container">	<p>Created by <a href="http://mithicher.github.io">mithicher</a> | Tweet me <a href="https://twitter.com/mithicher">@mithicher</a></p>	</div>	</footer><!-- /footer -->	<div class="site__overlay" id="site__overlay"></div>	</section><!-- /main-content --> </div> <!-- /site-pusher -->	</div> <!-- /site-container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

OffCanvas Navigation Menu - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
/* Basic Reset */
*,
*:after,
*:before { margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { font-size: 1.8em; line-height: 1.875; font-family: "Roboto", sans-serif; font-weight: 400; color: #555;
}
/* Basics Styles */
.container { max-width: 1000px; margin: 0 auto; padding-left: 1em; padding-right: 1em;
}
a { text-decoration: none; color: #1abc9c;
}
a:hover { color: #17a689;
}
h1, h2, h3 { margin-bottom: 1.2rem; line-height: 1.5;
}
h1 { font-size: 4.8rem;
}
h2 { font-size: 3.2rem;
}
h4 { font-size: 1.8rem; font-weight: 300;
}
.lead { font-size: 1.8rem;
}
p { margin-bottom: 1.5rem;
}
/* Padding Helpers */
.padding-tb { padding-top: 3%; padding-bottom: 3%;
}
/* OffCanvas Navigation Styles Starts */
/* Navigation variables */
.site__container { position: relative; overflow: hidden; width: 100%;
}
.site__pusher { min-height: 100vh; -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease;
}
/* For Fixed Navigation */
.navbar__fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 3; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Small Padding added to body to avoid content collapse while adding .navbar-fixed class */
@media screen and (min-width: 64.063em) { .navbar__fixed-padding { padding-top: 66px; }
}
/* Navbar Logo */
.navbar__logo { font-size: 2rem; font-family: "Roboto", sans-serif; font-weight: 700; color: #fff; opacity: 1; margin-right: 0;
}
.navbar__logo:hover { color: #fff; opacity: 0.6;
}
@media screen and (min-width: 64.063em) { .navbar__logo { position: relative; float: left; margin-right: 1rem; }
}
/* Navbar Styling */
.navbar { *zoom: 1; width: 100%; display: block; background-color: #555; height: 50px; line-height: 50px; color: #fff;
}
.navbar:after { content: ""; display: table; clear: both;
}
@media screen and (min-width: 64.063em) { .navbar { height: 66px; line-height: 66px; }
}
.navbar ul { margin: 0;
}
.navbar ul li { list-style-type: none; margin: 0; padding: 0; display: block;
}
@media screen and (min-width: 64.063em) { .navbar ul li { display: inline-block; } .navbar ul li.active a { color: #1abc9c; -moz-box-shadow: 0 -3px 0 #1abc9c inset; -webkit-box-shadow: 0 -3px 0 #1abc9c inset; box-shadow: 0 -3px 0 #1abc9c inset; }
}
/* Navbar Width */
.navbar__container { width: 100%; padding-left: 1em; padding-right: 1em; overflow: hidden;
}
@media screen and (min-width: 64.063em) { .navbar__container { max-width: 1000px; margin-left: auto; margin-right: auto; }
}
/* reveal menu for mobile when clicked */
.navbar__open { position: fixed; left: 0; height: 100%; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -webkit-transform: translateX(260px); transform: translateX(260px); -moz-transform: translate3d(260px, 0, 0); -ms-transform: translate3d(260px, 0, 0); -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease;
}
/* Menu Stylings */
.menu { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; height: 100%; background-color: #333; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -webkit-transform: translateX(-260px); transform: translateX(-260px); -moz-transform: translate3d(-260px, 0, 0); -ms-transform: translate3d(-260px, 0, 0); -webkit-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0); -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease;
}
@media screen and (min-width: 64.063em) { .menu { position: relative; display: inline; width: auto; background-color: transparent; } .menu .menu-pull-right { margin-top: -1px; float: right; } .menu .menu-pull-left { margin-top: -1px; float: left; }
}
.menu a { width: 100%; display: block; color: #f5f5f5; text-decoration: none; font-family: "Roboto", sans-serif; font-size: 1.6rem; outline: none; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; text-indent: 1.8rem; border-bottom: 1px solid #404040; color: #f5f5f5;
}
@media screen and (min-width: 64.063em) { .menu a { display: inline-block; padding: 0 10px; box-sizing: border-box; text-indent: 0; border-bottom: 0; } .menu a:hover, .menu a:focus { color: #1abc9c; -moz-box-shadow: 0 -3px 0 #1abc9c inset; -webkit-box-shadow: 0 -3px 0 #1abc9c inset; box-shadow: 0 -3px 0 #1abc9c inset; }
}
/* Add an overlay to the content when offcanvas navigation menu is revealed */
.navbar__open .site__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; z-index: 3;
}
/* Navbar Toggle Icon/ hamburger icon */
.navbar__toggle-icon { position: relative; display: block; float: left; width: 50px; height: 50px; cursor: pointer; outline: none;
}
@media screen and (min-width: 64.063em) { .navbar__toggle-icon { display: none; }
}
.navbar__toggle-icon:after { content: ''; position: absolute; display: block; width: 1.8rem; height: 0; top: 10px; left: 6px; -moz-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff; -webkit-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff; box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
}
/* OffCanvas Navigation Styles Ends */

OffCanvas Navigation Menu - Script Codes JS Codes

(function($) {	var body = $('body');	// When toggle-icon is clicked toggle the menu	$('#navbar__toggle-icon').click(function(e){	e.preventDefault();	$('.site__pusher').toggleClass('navbar__open');	});	// When Overlay is click toggle back the menu that is opened $('#site__overlay, .menu > a').click(function(e){ $('.site__pusher').removeClass('navbar__open'); }); // if navbar-fixed class has been added to #navbar then // add class navbar__fixed-padding to body... if ( $('#navbar').hasClass( 'navbar__fixed' )) {	body.addClass( 'navbar__fixed-padding' ); }
})(jQuery);
OffCanvas Navigation Menu - Script Codes
OffCanvas Navigation Menu - Script Codes
Home Page Home
Developer Mithicher
Username mithicher
Uploaded August 12, 2022
Rating 3
Size 5,757 Kb
Views 24,288
Do you need developer help for OffCanvas Navigation Menu?

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!

Mithicher (mithicher) Script Codes
Create amazing video scripts 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!