Off-screen navigation

Developer
Mitch Pruitt
Size
5,220 Kb
Views
20,240
  1. Off-screen navigation Previews
  2. Off-screen navigation HTML Codes
  3. Off-screen navigation CSS Codes
  4. Off-screen navigation JS Codes

How do I make an off-screen navigation?

Old news.. What is a off-screen navigation? How do you make a off-screen navigation? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Off-screen navigation Previews
IQ Test

Off-screen navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html class="preload">
<head> <meta charset="UTF-8"> <title>Off-screen navigation</title> <meta name='viewport' content='width=device-width'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
body { background-color: gainsboro;
}
a { text-decoration: none; color: #646464;
}
a:hover { color: gainsboro;
}
.menu-btn { position: fixed; z-index: 2; right: .5em; top: .5em; width: 1em; padding: .25em; text-align: center; font-size: 2em; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; color: #323232; transition: all .35s ease-in-out;
}
.menu-btn:hover { color: #646464; cursor: pointer;
}
nav { position: fixed; z-index: -1; width: 100vw; height: 100vh; margin: auto; padding: 2em; background-color: #323232; background-image: url(https://subtlepatterns.com/patterns/dark_wall.png);
}
nav ul { list-style-type: none;
}
nav ul li { color: gainsboro; margin-bottom: 1em; font: 1.25em/1.25em 'Varela Round', sans-serif;
}
nav ul li:last-of-type { margin-bottom: 0;
}
article { margin: auto; background-color: gainsboro; transition: all .35s ease-in-out;
}
article img { max-width: 100%; height: auto; margin-bottom: 1em;
}
article p { padding: 1em 2em 0; font: 1em/1.25em 'Varela Round', sans-serif; color: #323232;
}
.slide-offscreen { transform: translate(35%);
}
.preload * { transition: none !important;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <nav> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> </nav> <div class="menu-btn"> <span class="entypo-menu"></span> </div> <article> <img src="https://d2nh4f9cbhlobh.cloudfront.net/_uploads/galleries/83/big-lebowski-1.jpg" /> <p>Chinaman is not the preferred nomenclature. Asian-American. Please. My name's Da Fino! I'm a private snoop! Like you, man! All right, Plan B. You might want to watch out the front window there, Larry. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN UNMARKED NON-CONSECUTIVE TWENTIES. AWAIT INSTRUCTIONS. NO FUNNY STUFF. Ever hear of the Seattle Seven? Stay out of Malibu, deadbeat! Mr. Lebowski is in seclusion in the West Wing.</p> <p>I'm not Mr. Lebowski; you're Mr. Lebowski. I'm the Dude. HERE'S WHAT HAPPENS, LARRY! Dieter doesn't care about anything. He's a nihilist. Nice marmot. Can we just rent it from you? Excuse me! Mark it zero. Next frame. Call the medics, Dude. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin' parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that's a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn't make a whole lot of sense to me. And a lot about where he lived, likewise. But then again, maybe that's why I found the place s'durned innarestin'.</p> <p>Whose toe was it, Walter? You think veer kidding und making mit de funny stuff? Vee vant zat money, Lebowski. No, look. I do mind. The Dude minds. This will not stand, you know, this aggression will not stand, man. Zere ARE no ROOLZ! You know, the usual. Bowl. Drive around. The occasional acid flashback. Near the In-and-Out Burger. Is this yours, Larry? Is this your homework, Larry?</p> <p>They won't hurt us, Donny. These men are cowards. You know, little of this, little of that. No ma'am, I didn't mean to give the impression that we're police exactly. We're hoping that it will not be necessary to call the police. Uh, yeah. Probably a vagrant, slept in the car. Or perhaps just used it as a toilet, and moved on. I know my rights.</p> <p>Eight-year-olds, Dude. Wait in the car, Donny. Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options. Your "revolution" is over, Mr. Lebowski! Condolences! The bums lost! Okay. Vee take ze money you haf on you und vee call it eefen. I don't like you sucking around bothering our citizens, Lebowski. How come you don't roll on Saturday, Walter?</p> <p>Chinaman is not the preferred nomenclature. Asian-American. Please. My name's Da Fino! I'm a private snoop! Like you, man! All right, Plan B. You might want to watch out the front window there, Larry. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN UNMARKED NON-CONSECUTIVE TWENTIES. AWAIT INSTRUCTIONS. NO FUNNY STUFF. Ever hear of the Seattle Seven? Stay out of Malibu, deadbeat! Mr. Lebowski is in seclusion in the West Wing.</p> <p>I'm not Mr. Lebowski; you're Mr. Lebowski. I'm the Dude. HERE'S WHAT HAPPENS, LARRY! Dieter doesn't care about anything. He's a nihilist. Nice marmot. Can we just rent it from you? Excuse me! Mark it zero. Next frame. Call the medics, Dude. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin' parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that's a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn't make a whole lot of sense to me. And a lot about where he lived, likewise. But then again, maybe that's why I found the place s'durned innarestin'.</p> <p>Whose toe was it, Walter? You think veer kidding und making mit de funny stuff? Vee vant zat money, Lebowski. No, look. I do mind. The Dude minds. This will not stand, you know, this aggression will not stand, man. Zere ARE no ROOLZ! You know, the usual. Bowl. Drive around. The occasional acid flashback. Near the In-and-Out Burger. Is this yours, Larry? Is this your homework, Larry?</p> <p>They won't hurt us, Donny. These men are cowards. You know, little of this, little of that. No ma'am, I didn't mean to give the impression that we're police exactly. We're hoping that it will not be necessary to call the police. Uh, yeah. Probably a vagrant, slept in the car. Or perhaps just used it as a toilet, and moved on. I know my rights.</p> <p>Eight-year-olds, Dude. Wait in the car, Donny. Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options. Your "revolution" is over, Mr. Lebowski! Condolences! The bums lost! Okay. Vee take ze money you haf on you und vee call it eefen. I don't like you sucking around bothering our citizens, Lebowski. How come you don't roll on Saturday, Walter?</p> </article>
</body> <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-screen navigation - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
body { background-color: gainsboro;
}
a { text-decoration: none; color: #646464;
}
a:hover { color: gainsboro;
}
.menu-btn { position: fixed; z-index: 2; right: .5em; top: .5em; width: 1em; padding: .25em; text-align: center; font-size: 2em; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; color: #323232; transition: all .35s ease-in-out;
}
.menu-btn:hover { color: #646464; cursor: pointer;
}
nav { position: fixed; z-index: -1; width: 100vw; height: 100vh; margin: auto; padding: 2em; background-color: #323232; background-image: url(https://subtlepatterns.com/patterns/dark_wall.png);
}
nav ul { list-style-type: none;
}
nav ul li { color: gainsboro; margin-bottom: 1em; font: 1.25em/1.25em 'Varela Round', sans-serif;
}
nav ul li:last-of-type { margin-bottom: 0;
}
article { margin: auto; background-color: gainsboro; transition: all .35s ease-in-out;
}
article img { max-width: 100%; height: auto; margin-bottom: 1em;
}
article p { padding: 1em 2em 0; font: 1em/1.25em 'Varela Round', sans-serif; color: #323232;
}
.slide-offscreen { transform: translate(35%);
}
.preload * { transition: none !important;
}

Off-screen navigation - Script Codes JS Codes

$(document).ready(function() { $('html').removeClass('preload'); $('.menu-btn').click(function() { $(this).fadeTo(200, 0); $('article').addClass('slide-offscreen'); }); $('article').click(function() { if($('article').hasClass('slide-offscreen')) { $(this).removeClass('slide-offscreen'); $('.menu-btn').fadeTo(200, 1); } });
});
Off-screen navigation - Script Codes
Off-screen navigation - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 5,220 Kb
Views 20,240
Do you need developer help for Off-screen 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!

Mitch Pruitt (mitchdot) Script Codes
Name
Animated camera focus ring
Segmented control
Underlined form fields
Sample project gallery
The Iron Triangle
A Pen by Mitch Pruitt
Image header overlay
Flexbox quote box
Flexbox-based responsive menu
Contact Card Flip
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!