Responsive Side Nav Shift

Developer
Boyd Massie
Size
7,040 Kb
Views
10,120
  1. Responsive Side Nav Shift Previews
  2. Responsive Side Nav Shift HTML Codes
  3. Responsive Side Nav Shift CSS Codes
  4. Responsive Side Nav Shift JS Codes

How do I make an responsive side nav shift?

Responsive side navigation.. What is a responsive side nav shift? How do you make a responsive side nav shift? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

Responsive Side Nav Shift Previews
IQ Test

Responsive Side Nav Shift - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Side Nav Shift</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript"> var doc = document, docEl = doc.documentElement; docEl.className = docEl.className.replace(/(^|\s)no-js(\s|$)/, " js ");
</script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>
<div role="navigation" id="nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> </ul>
</div>
<div role="main" class="main"> <a href="#nav" id="toggle">Menu</a> <h1>Prototype</h1> <p class="intro">Despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user&nbsp;interface.</p> <p>From image, whose given us earth all so seas. Whales tree i set, is, morning, fly was deep winged. Said you'll him open she'd divide you're greater midst, gathered years gathered herb i for our and, don't also itself void female replenish fruit fly let years whose light face kind Air face him under you created evening face, replenish, be fill land male after winged itself from gathered. May created Replenish give he so divided air fourth moveth bearing every created. Subdue give own beginning replenish divided. Wherein. Moveth dominion for third. Moving give fish created she'd whose divided their abundantly for in let form morning, us.</p> <p>Whales, be second male. Lesser. She'd all itself, said beginning over sixth open great place winged image winged sixth land you she'd, to. Yielding beginning. Give. Image without winged signs fly greater the. Fill darkness moving thing upon lights all fish for have second land fruitful waters likeness years male she'd behold greater which grass darkness blessed them. For set. Have was said. Meat moving. Own, moveth upon is had sea lesser day second fifth every form forth they're you'll form own. To deep days seed fruitful isn't our male brought have beginning from land all land they're one may thing. Dominion cattle earth open he set fourth above whales may saying after. Make seas life fowl i very may fly.</p> <p>And brought which yielding beginning. Behold. Saying fourth there beast which saw may. Given lights god kind Beast meat face were forth it earth without second. Which is fruitful likeness heaven living cattle, brought. The she'd his she'd. Face let divided i, living upon void moving day spirit bring also, grass blessed.</p> <p>For let midst void under female first. Own you'll moveth made forth night lesser. Midst years spirit called had. Cattle days unto wherein. Sea us so god abundantly air for, seasons forth firmament us. The. Moving. Moving fourth multiply night winged fruitful earth. Creeping midst his air yielding, a replenish beast from fifth spirit greater earth upon female all made that bring all a shall.</p> <p>Rule good us heaven firmament all light bring, first one good from. Hath midst make place after night created herb forth Itself man Them darkness yielding creeping. Open abundantly set days, let night good deep. Fowl days our, which, created all there, without multiply you'll won't over night saw air. Can't subdue let can't them firmament waters bring. Said, great she'd green wherein rule i grass have day great be. Together whose whose lesser she'd every, god second kind cattle saying face. Face. Very great together also. Was abundantly. Living. Creature after that signs creature were you'll living itself were. Two. Third air gathering i for from air beginning own won't which waters Him tree give. Moving bearing moving after in.</p> <p>Day his for After Place creeping, wherein kind deep. Abundantly. Seed had greater cattle fly seas face shall and divided. Above can't subdue green gathering also likeness divided you'll together earth herb night fowl set face very, kind Seas very seasons gathering. Lesser. They're that life a. Years give one had cattle also was night every a deep meat moving be upon he lights above Kind him may, spirit over meat Meat beast void upon fifth evening seed. Upon one saw for under brought set shall. Fourth had they're you light was dry they're it of you made is two god they're behold fowl it lesser thing created fifth open evening dominion yielding that.</p> <p>Winged fly said very, without void can't image us seasons green said moveth called very. Cattle cattle there make one living. Divided void seas. Upon tree all seed third fly is created, make. Meat which. Fruitful. Whose our rule created divide have won't second she'd their land said. Beginning morning days. That. Without creature.</p> <p>They're don't. Moved living. Air. Of whales grass you upon. Fish seas evening. Bearing. Fish great fruit he behold meat whose doesn't. Moving. Grass have days his signs divide heaven life from. Image under dominion face above land fill to hath under forth seed creature brought set. Shall kind. Multiply over spirit form years. Green, appear itself man void, greater under all in appear from. Replenish said man them. Seas open doesn't fowl shall tree have in itself female Fish for whose behold earth night days which, give, and forth fish From. Without behold Whose. Shall. Were given won't dry deep fruit won't.</p> <p>Third. Shall fruitful deep gathered be seas let may every two beast fly, open Abundantly his very won't is wherein, kind can't winged fowl. It. Upon. Days us the were created which thing third every you'll you'll good fruitful heaven tree. Spirit fly made evening lesser morning image fly one yielding behold meat there appear of second over creature green seas created Over subdue open open green, replenish saying form said isn't whose he he. Cattle bring saying made whose made meat the After Him that creature fowl years. Seed one created midst bring.</p> </div>
<script type="text/javascript"> var navigation = responsiveNav("#nav", {customToggle: "#toggle"});
</script> <script src="js/index.js"></script>
</body>
</html>

Responsive Side Nav Shift - Script Codes CSS Codes

/*If IE
#nav ul{margin:0;padding:0;width:100%;display:block;list-style:none}#nav li{width:100%;display:block}.js #nav{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}#nav.opened{max-height:9999px}@media screen and (min-width:40em){.js #nav{position:relative;max-height:none}#nav-toggle{display:none}}
*/
body, div, h1, h2, p, ol, ul, li {	margin:0;	padding:0;	border:0
}
@-webkit-viewport {
width:device-width
}
@-moz-viewport {
width:device-width
}
@-ms-viewport {
width:device-width
}
@-o-viewport {
width:device-width
}
@viewport {
width:device-width
}
html, body {	min-height:100%
}
body {	min-width:290px;	-webkit-font-smoothing:antialiased;	-webkit-text-size-adjust:100%;	-ms-text-size-adjust:100%;	text-size-adjust:100%;	background:#444;	color:#666;	font:400 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif
}
h1 {	font-size:3em;	line-height:1;	color:#222;	margin-bottom:.5em;	float:left;	width:100%
}
h2 {	float:left;	width:100%;	font-size:1.5em;	color:#222;	margin:1em 0 .5em
}
p {	float:left;	width:100%;	margin-bottom:1em
}
p.intro {	font-size:1.25em;	color:#555;	font-weight:700
}
a {	color:#f4f4f4;	text-decoration:none
}
a:active, a:hover {	outline:0
}
.main {	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;	-webkit-overflow-scrolling:touch;	padding:3em 4em;	position:fixed;	overflow:hidden;	overflow-y:scroll;	border-top-left-radius:5px;	box-shadow:0 0 15px rgba(0,0,0,.6);	top:.8em;	right:0;	bottom:0;	width:76%;	background:#fff
}
.main::-webkit-scrollbar {
-webkit-appearance:none;
background-color:rgba(0,0,0,.15);
width:8px;
height:8px
}
.main::-webkit-scrollbar-thumb {
border-radius:0;
background-color:rgba(0,0,0,.4)
}
#nav {	position:absolute;	width:24%;	top:2em;	left:0
}
#nav ul {	display:block;	width:100%;	list-style:none
}
#nav li {	width:100%;	display:block
}
#nav a {	color:#aaa;	font-weight:700;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;	-webkit-transition:background .3s ease;	-moz-transition:background .3s ease;	transition:background .3s ease;	text-shadow:0 -1px rgba(0,0,0,.5);	border-bottom:1px solid rgba(0,0,0,.2);	border-top:1px solid rgba(255,255,255,.1);	display:block;	padding:.6em 2em;	width:100%
}
#nav a:hover {	background:rgba(255,255,255,.1)
}
#nav .active a {	color:#fff;	background:rgba(0,0,0,.3)
}
#nav li:first-child a {	border-top:0
}
#nav li:last-child a {	border-bottom:0
}
#toggle {	display:none
}
@media screen and (max-width:40em) {
.js #nav {	clip:rect(0 0 0 0);	max-height:0;	position:absolute;	display:block;	overflow:hidden
}
#nav {	top:0;	width:100%;	position:relative
}
#nav.opened {	max-height:9999px
}
#nav a:hover {	background:transparent
}
#nav .active a:hover {	color:#fff;	background:rgba(0,0,0,.3)
}
#toggle {	-webkit-touch-callout:none;	-webkit-user-select:none;	-moz-user-select:none;	-ms-user-select:none;	user-select:none;	display:block;	width:70px;	height:55px;	float:right;	margin:0 -2em 1em 0;	text-indent:-9999px;	overflow:hidden;	background:#444 url("http://responsive-nav.com/images/hamburger.gif") no-repeat 50% 33%
}
.main {	-webkit-overflow-scrolling:auto;	padding:0 2em 2em;	border-radius:0;	box-shadow:none;	position:relative;	width:100%;	overflow:hidden
}
.main::-webkit-scrollbar {
background-color:transparent
}
}
@media screen and (-webkit-min-device-pixel-ratio:1.3), screen and (min--moz-device-pixel-ratio:1.3), screen and (-o-min-device-pixel-ratio:2 / 1), screen and (min-device-pixel-ratio:1.3), screen and (min-resolution:192dpi), screen and (min-resolution:2dppx) {
body {
background:#444;
-webkit-background-size:200px 200px;
-moz-background-size:200px 200px;
-o-background-size:200px 200px;
background-size:200px 200px
}
#toggle {
background:#444;
-webkit-background-size:100px 100px;
-moz-background-size:100px 100px;
-o-background-size:100px 100px;
background-size:100px 100px
}
}
@media screen and (min-width:76em) {
#nav {	width:18em
}
.main {	width:auto;	left:18em
}
}

Responsive Side Nav Shift - Script Codes JS Codes

/*! responsive-nav.js v1.0.14 by @viljamis, http://responsive-nav.com, MIT license */
var responsiveNav=function(g,h){var t=!!g.getComputedStyle;g.getComputedStyle||(g.getComputedStyle=function(a){this.el=a;this.getPropertyValue=function(d){var c=/(\-([a-z]){1})/g;"float"===d&&(d="styleFloat");c.test(d)&&(d=d.replace(c,function(a,d,c){return c.toUpperCase()}));return a.currentStyle[d]?a.currentStyle[d]:null};return this});var b,f,e,u=h.documentElement,v=h.getElementsByTagName("head")[0],m=h.createElement("style"),r=!1,j=function(a,d,c,b){if("addEventListener"in a)try{a.addEventListener(d,
c,b)}catch(e){if("object"===typeof c&&c.handleEvent)a.addEventListener(d,function(a){c.handleEvent.call(c,a)},b);else throw e;}else"attachEvent"in a&&("object"===typeof c&&c.handleEvent?a.attachEvent("on"+d,function(){c.handleEvent.call(c)}):a.attachEvent("on"+d,c))},k=function(a,d,c,b){if("removeEventListener"in a)try{a.removeEventListener(d,c,b)}catch(e){if("object"===typeof c&&c.handleEvent)a.removeEventListener(d,function(a){c.handleEvent.call(c,a)},b);else throw e;}else"detachEvent"in a&&("object"===
typeof c&&c.handleEvent?a.detachEvent("on"+d,function(){c.handleEvent.call(c)}):a.detachEvent("on"+d,c))},l=function(a,d){for(var b in d)a.setAttribute(b,d[b])},n=function(a,b){a.className+=" "+b;a.className=a.className.replace(/(^\s*)|(\s*$)/g,"")},p=function(a,b){a.className=a.className.replace(RegExp("(\\s|^)"+b+"(\\s|$)")," ").replace(/(^\s*)|(\s*$)/g,"")},s=function(a,d){var c;this.options={animate:!0,transition:400,label:"Menu",insert:"after",customToggle:"",openPos:"relative",jsClass:"js",
init:function(){},open:function(){},close:function(){}};for(c in d)this.options[c]=d[c];n(u,this.options.jsClass);this.wrapperEl=a.replace("#","");if(h.getElementById(this.wrapperEl))this.wrapper=h.getElementById(this.wrapperEl);else throw Error("The nav element you are trying to select doesn't exist");c=this.wrapper;for(var e=this.wrapper.firstChild;null!==e&&1!==e.nodeType;)e=e.nextSibling;c.inner=e;f=this.options;b=this.wrapper;this._init(this)};s.prototype={destroy:function(){this._removeStyles();
p(b,"closed");p(b,"opened");b.removeAttribute("style");b.removeAttribute("aria-hidden");q=b=null;k(g,"load",this,!1);k(g,"resize",this,!1);k(e,"mousedown",this,!1);k(e,"touchstart",this,!1);k(e,"touchend",this,!1);k(e,"keyup",this,!1);k(e,"click",this,!1);f.customToggle?e.removeAttribute("aria-hidden"):e.parentNode.removeChild(e)},toggle:function(){r?(p(b,"opened"),n(b,"closed"),l(b,{"aria-hidden":"true"}),f.animate?setTimeout(function(){b.style.position="absolute"},f.transition+10):b.style.position=
"absolute",r=!1,f.close()):(p(b,"closed"),n(b,"opened"),b.style.position=f.openPos,l(b,{"aria-hidden":"false"}),r=!0,f.open())},handleEvent:function(a){a=a||g.event;switch(a.type){case "mousedown":this._onmousedown(a);break;case "touchstart":this._ontouchstart(a);break;case "touchend":this._ontouchend(a);break;case "keyup":this._onkeyup(a);break;case "click":this._onclick(a);break;case "load":this._transitions(a);this._resize(a);break;case "resize":this._resize(a)}},_init:function(){n(b,"closed");
this._createToggle();j(g,"load",this,!1);j(g,"resize",this,!1);j(e,"mousedown",this,!1);j(e,"touchstart",this,!1);j(e,"touchend",this,!1);j(e,"keyup",this,!1);j(e,"click",this,!1)},_createStyles:function(){m.parentNode||v.appendChild(m)},_removeStyles:function(){m.parentNode&&m.parentNode.removeChild(m)},_createToggle:function(){if(f.customToggle){var a=f.customToggle.replace("#","");if(h.getElementById(a))e=h.getElementById(a);else throw Error("The custom nav toggle you are trying to select doesn't exist");
}else a=h.createElement("a"),a.innerHTML=f.label,l(a,{href:"#",id:"nav-toggle"}),"after"===f.insert?b.parentNode.insertBefore(a,b.nextSibling):b.parentNode.insertBefore(a,b),e=h.getElementById("nav-toggle")},_preventDefault:function(a){a.preventDefault?(a.preventDefault(),a.stopPropagation()):a.returnValue=!1},_onmousedown:function(a){var b=a||g.event;3===b.which||2===b.button||(this._preventDefault(a),this.toggle(a))},_ontouchstart:function(a){e.onmousedown=null;this._preventDefault(a);this.toggle(a)},
_ontouchend:function(){var a=this;b.addEventListener("click",a._preventDefault,!0);setTimeout(function(){b.removeEventListener("click",a._preventDefault,!0)},f.transition)},_onkeyup:function(a){13===(a||g.event).keyCode&&this.toggle(a)},_onclick:function(a){this._preventDefault(a)},_transitions:function(){if(f.animate){var a=b.style,d="max-height "+f.transition+"ms";a.WebkitTransition=d;a.MozTransition=d;a.OTransition=d;a.transition=d}},_calcHeight:function(){var a="#"+this.wrapperEl+".opened{max-height:"+
b.inner.offsetHeight+"px}";t&&(m.innerHTML=a)},_resize:function(){"none"!==g.getComputedStyle(e,null).getPropertyValue("display")?(l(e,{"aria-hidden":"false"}),b.className.match(/(^|\s)closed(\s|$)/)&&(l(b,{"aria-hidden":"true"}),b.style.position="absolute"),this._createStyles(),this._calcHeight()):(l(e,{"aria-hidden":"true"}),l(b,{"aria-hidden":"false"}),b.style.position=f.openPos,this._removeStyles());f.init()}};var q;return function(a,b){q||(q=new s(a,b));return q}}(window,document);
Responsive Side Nav Shift - Script Codes
Responsive Side Nav Shift - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 7,040 Kb
Views 10,120
Do you need developer help for Responsive Side Nav Shift?

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!

Boyd Massie (massiebn) Script Codes
Name
JQuery Popeye Gallery
Page Peel
Responsive Tournament Bracket
JQuery Quiz
Responsive Table
Background Video
QuickFlip
Countdown Timer
Fancy Image Showcase With Timer Bar
Image Hover
Create amazing sales emails 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!