No-JS Off Canvas Navigation

Developer
Chris Yaxley
Size
4,805 Kb
Views
8,096
  1. No-JS Off Canvas Navigation Previews
  2. No-JS Off Canvas Navigation HTML Codes
  3. No-JS Off Canvas Navigation CSS Codes

How do I make an no-js off canvas navigation?

Simple No-JS off canvas menu using a check box to control the opening of the menu. What is a no-js off canvas navigation? How do you make a no-js off canvas navigation? This script and codes were developed by Chris Yaxley on 07 January 2023, Saturday.

No-JS Off Canvas Navigation Previews
IQ Test

No-JS Off Canvas Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>No-JS Off Canvas Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header role="banner"> <div class="image-wrapper"> <img src="https://chrisyaxley.co.uk/images/ChrisYaxleyLogo.png" width="102" height="64" alt="ChrisYaxleyLogo"> </div> <h1 class="page-subtitle">No-JS Off Canvas Navigation</h1> <!-- Header content --> </header> <input type="checkbox" id="menu"> <label for="menu">Menu</label> <nav class="navigation" role="navigation"> <ul> <li><a href="https://chrisyaxley.co.uk">Home</a></li> <li><a href="https://github.com/chrisyaxley/offCanvasMenu">Git Hub Link</a></li> <li><a href="https://chrisyaxley.co.uk/techDemos/offCanvas/">Live site link</a></li> <li><a href="https://twitter.com/uiYaxley">Twitter</a></li> <li><a href="https://codepen.io/chrisyaxley/">CodePen Profile</a></li> </ul> </nav> <div role="main"> <div class="col"> <article> <h2>Article Title</h2> <p>Hashtag biodiesel synth, scenester Helvetica quinoa swag. Cliche letterpress semiotics direct trade leggings kale chips. PBR fashion axe scenester church-key trust fund, next level Marfa literally pickled four loko 3 wolf moon post-ironic. Next level tattooed drinking vinegar banjo leggings blog. Kale chips deep v normcore chillwave tattooed, next level master cleanse pop-up Williamsburg Thundercats typewriter banjo Odd Future Cosby sweater. Selfies literally Bushwick you probably haven't heard of them. Vice banh mi cliche lomo, 3 wolf moon distillery Tumblr freegan.</p> </article> <article> <h2>Article Title</h2> <p>Skateboard synth master cleanse try-hard. Freegan Blue Bottle YOLO butcher. Trust fund letterpress tousled, food truck skateboard selvage VHS slow-carb keffiyeh narwhal PBR mustache ugh next level. Plaid Neutra 90's, squid try-hard swag meh narwhal organic. Dreamcatcher PBR&B twee, Truffaut.</p> <h3>Sub heading</h3> <p>freegan Schlitz ethnic master cleanse wolf brunch viral put a bird on it. Organic Godard four loko fixie pickled. Lo-fi Schlitz vinyl Neutra.</p> </article> <article> <h2>Article Title</h2> <p>XOXO banjo four loko selvage, asymmetrical readymade PBR&B umami sustainable retro sartorial. Craft beer drinking vinegar Etsy Marfa, Pitchfork dreamcatcher tousled vinyl synth Banksy cred umami. Locavore mlkshk Wes Anderson cardigan typewriter fap, synth semiotics mixtape sriracha single-origin coffee raw denim. Polaroid post-ironic single-origin coffee gastropub Tonx, Pinterest flexitarian wolf cornhole Blue Bottle. Chia yr Blue Bottle cliche, slow-carb actually sustainable. Artisan Bushwick sartorial, mixtape readymade freegan Blue Bottle pour-over bespoke tattooed umami. Fanny pack cardigan art party VHS Helvetica butcher.</p> </article> </div> <div class="col"> <article> <h2>Article Title</h2> <p>Hashtag biodiesel synth, scenester Helvetica quinoa swag. Cliche letterpress semiotics direct trade leggings kale chips. PBR fashion axe scenester church-key trust fund, next level Marfa literally pickled four loko 3 wolf moon post-ironic. Next level tattooed drinking vinegar banjo leggings blog. Kale chips deep v normcore chillwave tattooed, next level master cleanse pop-up Williamsburg Thundercats typewriter banjo Odd Future Cosby sweater. Selfies literally Bushwick you probably haven't heard of them. Vice banh mi cliche lomo, 3 wolf moon distillery Tumblr freegan.</p> </article> <article> <h2>Article Title</h2> <p>Skateboard synth master cleanse try-hard. Freegan Blue Bottle YOLO butcher. Trust fund letterpress tousled, food truck skateboard selvage VHS slow-carb keffiyeh narwhal PBR mustache ugh next level. Plaid Neutra 90's, squid try-hard swag meh narwhal organic. Dreamcatcher PBR&B twee, Truffaut freegan Schlitz ethnic master cleanse wolf brunch viral put a bird on it. Organic Godard four loko fixie pickled. Lo-fi Schlitz vinyl Neutra.</p> </article> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

No-JS Off Canvas Navigation - Script Codes CSS Codes

/*! * offCanvas * * * @author Chris Yaxley * @version 0.0.0 * Copyright . BSD licensed. */
/* -------------------------------------------------------------------------- */
/* ---------- Compass ------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;
}
/* ---------- Initialize ---------------------------------------------------- */
/* ---------- Utils --------------------------------------------------------- */
* { box-sizing: border-box;
}
/*Clear Fix*/
.clearfix { zoom: 1;
}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden;
}
.clearfix:after { clear: both;
}
/* ---------- Elements ------------------------------------------------------ */
/* ---------- Typography ---------------------------------------------------- */
body { color: white; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.35;
}
/* ---------- Headings ------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1;
}
h1 { color: #27b1f0; font-size: 1.750em;
}
h2 { color: #fa00f3; font-size: 1.500em; margin-bottom: 0.5em;
}
h3 { color: #27b1f0; margin: 0.625em 0;
}
h4,
h5,
h6 { color: white; font-size: 1.125em;
}
.page-subtitle { color: white; margin: 0.5em 0;
}
html, body { background-color: #262626;
}
.container { padding: 1.500em; max-width: 60em; margin: 0 auto; -ms-box-sizing: border-box; box-sizing: border-box;
}
/* Navigation */
/* Small Screen */
.navigation { display: -webkit-box; display: -ms-flexbox; display: box; display: flexbox; display: flex; -ms-box-pack: left; -moz-justify-content: left; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; -webkit-box-orient: horizontal; -moz-box-orient: horizontal;
}
.navigation ul { position: absolute; list-style-type: none; margin: 0 0 2em 0; padding: 0; width: 100%; max-width: 20em; left: -20em; text-align: center; display: -ms-flexbox; display: -moz-box; display: box; display: flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-box-orient: horizontal; -ms-box-pack: center; -moz-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
}
.navigation li { background-color: #212121; border-left: 1px solid #333333; margin: 0; padding: 1em; transition: all .5s; width: 100%; -webkit-box-flex: auto; -ms-flex: auto; flex: auto; -webkit-transition: all .5s;
}
.navigation li:hover { background-color: #414141;
}
.navigation li:first-child { border-bottom: 5px solid #fc9c9c;
}
.navigation li:nth-child(2) { border-bottom: 5px solid #FFC;
}
.navigation li:nth-child(2):hover { border-bottom: 5px solid #FF0;
}
.navigation li:nth-child(3) { border-bottom: 5px solid #39F;
}
.navigation li:nth-child(3):hover { border-bottom: 5px solid #00F;
}
.navigation li:nth-child(4) { border-bottom: 5px solid #6F9;
}
.navigation li:nth-child(4):hover { border-bottom: 5px solid #0C0;
}
.navigation li:first-child:hover { border-bottom: 5px solid #ff0000;
}
.navigation li:last-child { border-bottom: 5px solid #666666;
}
.navigation li:last-child:hover { border-bottom: 5px solid #ffffff;
}
.navigation li a { color: #ffffff; text-decoration: none;
}
.navigation li:hover a { text-decoration: underline;
}
/* When tick box checked show menu*/
input:checked ~ nav[role="navigation"] ul { left: 0;
}
div[role="main"] { width: 100%; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
}
input:checked ~ div[role="main"] { margin-left: 20em;
}
/* Advanced Checkbox Hack from http://timpietrusky.com/advanced-checkbox-hack*/
body { -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; }
}
input#menu { position: absolute; top: -9999px; left: -9999px;
}
label[for="menu"] { display: block; padding: 1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0;
}
label[for="menu"]:hover,
input:checked ~ label[for="menu"] { text-decoration: underline;
}
@media only screen and (min-width: 37.5em) { #menu, label[for="menu"] { display: none; } .navigation ul{ width: 100%; position: relative; max-width: 60em; left: 0; display: -moz-box; display: -webkit-box; display: box; } li{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
}
div[role="main"] article { background-color: #414141; margin: 0.5em; width: auto; position: relative; padding: 0.725em 12px;
}
@media only screen and (min-width: 37.5em) { div[role="main"] .col { display: -webkit-box; display: -ms-flexbox; display: -moz-box; display: box; display: flexbox; display: flex; -moz-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-box-pack: stretch; -moz-justify-content: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } div[role="main"] article { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: table-cell; width: auto; }
}
/* ---------- Page templates ------------------------------------------------ */
/* Header */
@media only screen and (min-width: 37.5em) { header { display: -webkit-box; display: -ms-flexbox; display: flex; } header .image-wrapper { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .page-subtitle { flex: auto; margin: 0; line-height: 1.7em; text-align: right; -webkit-box-flex: 1; -webkit-flex: auto; -moz-box-flex: 1; -ms-flex: auto; }
}
No-JS Off Canvas Navigation - Script Codes
No-JS Off Canvas Navigation - Script Codes
Home Page Home
Developer Chris Yaxley
Username chrisyaxley
Uploaded January 07, 2023
Rating 4
Size 4,805 Kb
Views 8,096
Do you need developer help for No-JS 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!

Chris Yaxley (chrisyaxley) Script Codes
Name
Quick PostCodes.io test
Responsive Calender view
Social Share Sprite using SASS Each
Some modern CSS techniques
Google style image preview
No-JS Tool tips
SVG Logo with CSS animations
Basic Mario Keyframes animation
A Pen by Chris Yaxley
3D Transforms CSS Carousel
Create amazing Facebook ads 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!