Nav Back There

Developer
Tcmulder
Size
3,646 Kb
Views
40,480
  1. Nav Back There Previews
  2. Nav Back There HTML Codes
  3. Nav Back There CSS Codes
  4. Nav Back There JS Codes

How do I make an nav back there?

Navigation hidden behind the content.. What is a nav back there? How do you make a nav back there? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Nav Back There Previews
IQ Test

Nav Back There - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav Back There</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <head> <nav class="main-nav-list"> <ul> <li> <a href="javascript:void(0);"> Home </a> </li> <li> <a href="javascript:void(0);"> About </a> </li> <li> <a href="javascript:void(0);"> Portfolio </a> </li> <li> <a href="javascript:void(0);"> Team </a> </li> <li> <a href="javascript:void(0);"> Contact </a> </li> </ul> </nav>
</head>
<section class="page"> <nav class="hamberger"> <a href="javascript:void(0);" id="main-nav">Activate Navigation</a> </nav> <article class="page-inner"> <h1>Page Title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan, diam eu suscipit feugiat, nibh risus semper urna, vel venenatis nisl erat eget odio. </p> <p> Aliquam sed cursus libero. Maecenas ut vulputate neque. Phasellus volutpat mollis massa, nec commodo orci mollis sit amet. Vivamus eu varius nisi. Nam eu dui venenatis, faucibus libero eu, luctus lectus. Quisque accumsan tincidunt nulla ac rutrum. Pellentesque et ante id velit dictum vulputate sodales eu lacus. </p> <h2>Random Heading</h2> <h3><em>Subtitle</em></h3> <p> Nunc a sagittis metus. Suspendisse eu mattis lacus, et convallis felis. Nam enim odio, viverra sit amet tortor non, luctus suscipit enim. Nunc commodo ullamcorper ligula id blandit. Aliquam semper porttitor volutpat. Vivamus lacinia enim tellus, vitae ullamcorper lorem viverra ultrices. Cras tempor iaculis orci a sollicitudin. </p> <h2>Random Heading</h2> <h3><em>Subtitle</em></h3> <p> Nec commodo orci mollis sit amet. Vivamus eu varius nisi. Nam eu dui venenatis, faucibus libero eu, luctus lectus. Quisque accumsan tincidunt nulla ac rutrum. Pellentesque et ante id velit dictum vulputate sodales eu lacus. </p> <p> Nunc a sagittis metus. Suspendisse eu mattis lacus, et convallis felis. Nam enim odio, viverra sit amet tortor non, luctus suscipit enim. Nunc commodo ullamcorper ligula id blandit. Aliquam semper porttitor volutpat. Vivamus lacinia enim tellus, vitae ullamcorper lorem viverra ultrices. Cras tempor iaculis orci a sollicitudin. </p> </article>
</section>
<footer>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Nav Back There - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html, body { height: 100%; font-family: "Trebuchet MS", sans-sarif; line-height: 1.4;
}
.main-nav-list { position: absolute; z-index: 0; height: 100%; width: 100%; background: -webkit-linear-gradient(315deg, #88002b 0%, #c21a1e 100%); background: linear-gradient(135deg, #88002b 0%, #c21a1e 100%); color: #fff; font-family: "Century Gothic", sans-sarif;
}
.main-nav-list a { text-decoration: none; color: #fff;
}
.main-nav-list ul { margin: 1em 0 0; padding-left: 1em;
}
.main-nav-list li { list-style: none;
}
.hamberger { position: absolute; width: 3em; height: 2.55em; background: #fff; text-indent: -9999px; border-radius: 0 0 .2em 0;
}
.hamberger a { position: absolute; left: 10%; top: .4em; border-bottom: 1em double #000; border-top: .35em solid #000; height: 1.7em; width: 80%;
}
.page { position: absolute; height: 100%; width: 100%; overflow-y: scroll; background: -webkit-linear-gradient(315deg, #00242b 0%, #003d44 100%); background: linear-gradient(135deg, #00242b 0%, #003d44 100%); -webkit-transition: 300ms; transition: 300ms; -webkit-transform-origin: 0 0; transform-origin: 0 0; color: #fff;
}
.page.active { -webkit-transform: scale(0.85) translate(40%, 5%); transform: scale(0.85) translate(40%, 5%); opacity: .7; box-shadow: 0 2em 7em #000; overflow-y: hidden;
}
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 { margin-top: 1em; margin-bottom: 0; font-family: "Century Gothic", sans-sarif;
}
.page-inner { padding: 1em;
}

Nav Back There - Script Codes JS Codes

$('#main-nav, .main-nav-list').click(function(){ $('.page').toggleClass('active');
});
Nav Back There - Script Codes
Nav Back There - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 3
Size 3,646 Kb
Views 40,480
Do you need developer help for Nav Back There?

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!

Tcmulder (tcmulder) Script Codes
Name
Self Populating Percentage Graphics
Zoom
Stickup Sticky Nav jQuery Plugin
Unfinished sunrise
Half Flip
Cartoon Bomb
CSS-Only Slideshow
Toggle-to-Menu Concept
Background Wipe
Button
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!