Off-canvas navigation

Developer
Hugo Giraudel
Size
3,864 Kb
Views
30,360
  1. Off-canvas navigation Previews
  2. Off-canvas navigation HTML Codes
  3. Off-canvas navigation CSS Codes

How do I make an off-canvas navigation?

What is a off-canvas navigation? How do you make a off-canvas navigation? This script and codes were developed by Hugo Giraudel on 09 August 2022, Tuesday.

Off-canvas navigation Previews
IQ Test

Off-canvas navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off-canvas navigation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Hidden checkbox, responsible for the whole toggle thing Needs to be on top of the document, possibly right after opening `<body>` The `id` attribute is intended to make a label with a matching `for` attribute able to toggle this checkbox remotely The `aria-hidden` attribute is for ARIA purpose, see: http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
-->
<input type="checkbox" id="nav-toggle" aria-hidden="true">
<!-- You can have any markup you want here -->
<!-- Off-canvas navigation Needs to come after the checkbox, but not necessarily directly after it
-->
<nav class="nav"> <!-- Label toggling the checkbox thank to the `for` attribute The empty `onclick` attribute aims at fixing a bug in iOS < 6.0 See: http://timpietrusky.com/advanced-checkbox-hack --> <label for="nav-toggle" class="nav-toggle" onclick>☰</label>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Off-canvas navigation - Script Codes CSS Codes

/** * Full height containers */
html, body { height: 100%;
}
/** * Offcanvas navigation * 1. Arbitrary width, feel free to adapt * 2. Full height nav * 3. Off-canvas * 4. Responsible for opening/closing animation */
.nav { width: 350px; /* 1 */ position: fixed; top: 0; /* 2 */ bottom: 0; /* 2 */ -webkit-transform: translateX(-100%); transform: translateX(-100%); /* 3 */ background: deepskyblue; -webkit-transition: 0.15s; transition: 0.15s; /* 4 */
}
/** * Button thingie * 1. Absolutely positioning * 2. ... on the right side of the nav (make sure overflow is visible) */
.nav-toggle { position: absolute; /* 1 */ left: 100%; /* 2 */ top: 1em; padding: 0.5em; background: inherit; color: white; cursor: pointer; font-size: 1.2em; line-height: 1;
}
/** * Checkbox responsible for the toggle hack * Hidden, no matter what * Lower the selector specificity by using an attribute rather than an ID */
[id='nav-toggle'] { position: absolute; clip: rect(0 0 0 0); opacity: 0;
}
/** * When checkbox is checked, open the nav * Lower the selector specificity by using an attribute rather than an ID */
[id='nav-toggle']:checked ~ .nav { -webkit-transform: translateX(0); transform: translateX(0);
}
/** * Rotate the label when nav is opened * Purely aesthetic * Lower the selector specificity by using an attribute rather than an ID */
[id='nav-toggle']:checked ~ .nav > .nav-toggle { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
/** * Fixing a bug in Android <= 4.1.2 * See: http://timpietrusky.com/advanced-checkbox-hack * Beware, can be costly: http://codepen.io/HugoGiraudel/details/jPOREG#comment-id-89799 */
body { -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix { to { padding: 0; }
}
/** * Take care of small screens */
@media (max-width: 350px) { .nav { width: 100%; } [id='nav-toggle']:checked ~ .nav > .nav-toggle { left: auto; right: 0; top: 0; }
}
/** * Provide a fallback for browsers that do not support CSS transforms */
.no-csstransforms .nav { left: -350px;
}
.no-csstransforms [id='nav-toggle']:checked ~ .nav { left: 0;
}
Off-canvas navigation - Script Codes
Off-canvas navigation - Script Codes
Home Page Home
Developer Hugo Giraudel
Username HugoGiraudel
Uploaded August 09, 2022
Rating 4.5
Size 3,864 Kb
Views 30,360
Do you need developer help for Off-canvas navigation?

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!

Hugo Giraudel (HugoGiraudel) Script Codes
Name
Items on circle
Pure CSS light switch
Batman loader
CSS temperature controler
Pure CSS button switch
Demo Flexbox 3
Demo Flexbox 2
Social swatchbook
List of web resources
Content through Media Queries
Create amazing blog posts 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!