Panel Navigation

Developer
Jon Christensen
Size
4,288 Kb
Views
22,264
  1. Panel Navigation Previews
  2. Panel Navigation HTML Codes
  3. Panel Navigation CSS Codes
  4. Panel Navigation JS Codes

How do I make an panel navigation?

For use in responsive or web applications. Hidden panel menu navigation similar to Facebook / Steam apps on phones. Uses CSS3 transitions and hardware accelerated transforms to animate. Does use overflow, which may not be supported on all phones. . What is a panel navigation? How do you make a panel navigation? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Panel Navigation Previews
IQ Test

Panel Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Panel 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/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! */
@-ms-viewport { width: device-width;
}
@viewport { width: device-width;
}
.group:before, .group:after { content:""; display:table;}
.group:after { clear:both;}
.container { font-size: 1.6rem; padding: 2em;}
html { font-size: 62.5%;}
#wrap { position: relative; overflow: hidden; width: 100%;}
#header { background: #333; height: 100%; left: 0; overflow: auto; position: absolute; top: 0; width: 100%; -webkit-overflow-scrolling: touch;
}
#header ul a { color: #fff; display: inline-block; font-size: 1.6rem; padding: 1em; text-decoration: none;
}
#header a:hover { color:#0099CC;}
#header ul { margin: 0; padding: 0;}
#header li { display: block; list-style: none;}
#content { box-shadow: 0 0 10px rgba(0,0,0,0.75); background: #fff; position: relative; width: 100%; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease 0s;
}
#footer { background: #000; color: #fff; display: block; font-size: 1.6rem; padding: 1em;
}
#wrap:target #content,
.nav-open #content { transform: translate3d(86%, 0px, 0px);}
.button { background: #000; color: #CCC; display: block; font-size: 1.8rem; padding: 1em; text-decoration: none; width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="wrap" class="trans"> <div id="header" class="panel overthrow"> <nav> <ul id="nav"> <li><a href="http://google.com">Somelink 1</a> </li> <li><a href="#">Somelink 2</a> </li> <li><a href="#">Somelink 3</a> </li> <li><a href="#">Somelink 4</a> </li> <li><a href="#">Somelink 5</a> </li> <li><a href="#">Somelink 6</a> </li> <li><a href="#">Somelink 21</a> </li> <li><a href="#">Somelink 31</a> </li> <li><a href="#">Somelink 41</a> </li> <li><a href="#">Somelink 51</a> </li> <li><a href="#">Somelink 61</a> </li> <li><a href="#">Somelink 22</a> </li> <li><a href="#">Somelink 32</a> </li> <li><a href="#">Somelink 42</a> </li> <li><a href="#">Somelink 52</a> </li> <li><a href="#">Somelink 62</a> </li> <li><a href="#">Somelink 23</a> </li> <li><a href="#">Somelink 33</a> </li> <li><a href="#">Somelink 43</a> </li> <li><a href="#">Somelink 53</a> </li> <li><a href="#">Somelink 63</a> </li> <li><a href="#">Somelink 24</a> </li> <li><a href="#">Somelink 34</a> </li> <li><a href="#">Somelink 44</a> </li> <li><a href="#">Somelink 54</a> </li> <li><a href="#">Somelink 64</a> </li> </ul> </nav> </div> <div id="content" class="panel trans"> <p><a class="button icon-menu" href="#wrap" data-action="showNav">Menu</a> </p> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit augue, luctus sed iaculis sit amet, laoreet sed dui. Maecenas vitae varius libero. Vestibulum blandit, ipsum et tincidunt aliquet, nulla ipsum molestie nisl, eu eleifend ligula diam a mi. Aenean tristique vehicula hendrerit. Mauris sed nisi quis nisi auctor pretium. Phasellus commodo aliquam lacus, nec feugiat arcu interdum ac. Praesent faucibus consequat mattis. Aliquam ultrices porttitor risus et sodales. Suspendisse ipsum velit, bibendum sit amet bibendum sit amet, faucibus eu elit. Phasellus nulla sapien, aliquam nec suscipit eu, tristique sed ipsum. Proin consequat felis ac nunc sagittis pharetra. Donec nisi sapien, viverra at tincidunt hendrerit, sodales in urna. Proin suscipit neque nec neque euismod auctor.</p> <p>In tempor, felis non tempor mattis, sapien ante tristique eros, in luctus magna nisl ac neque. Fusce a mauris sem. Quisque eu sapien nibh. Nam ultrices vulputate nisi tristique eleifend. Aliquam suscipit fermentum eros, quis accumsan diam porta eu. Sed hendrerit consequat nisl, quis condimentum enim consectetur a. Suspendisse vel orci id dolor euismod eleifend. Aliquam erat volutpat.</p> <p>Morbi sem metus, luctus ut sollicitudin luctus, mattis molestie quam. Aenean dapibus iaculis ornare. Ut at ligula congue dolor egestas sollicitudin. Nunc sed nulla eu sapien vulputate ultricies vitae at dui. Integer imperdiet rutrum posuere. Etiam non nunc et nulla pretium facilisis. Donec ultrices ante vitae nisi pellentesque pretium. Integer volutpat, ante vel consequat aliquam, nibh odio lobortis sem, eu bibendum sem nulla sit amet justo. Aenean vitae sapien vitae massa porta sagittis at ac eros. Donec a arcu sapien, vitae venenatis enim. Sed quis ligula luctus magna adipiscing dignissim. Suspendisse cursus neque eget orci euismod porttitor. Nunc consequat, quam at congue pellentesque, urna risus dignissim purus, non consectetur mi risus vel ante. Nam a volutpat nisl. Vivamus in tortor eget est ultrices rhoncus et sed neque.</p> </div> <div id="footer"> <p>Copyright and all that kinda stuff</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Panel Navigation - Script Codes CSS Codes

@-ms-viewport { width: device-width;
}
@viewport { width: device-width;
}
.group:before, .group:after { content:""; display:table;}
.group:after { clear:both;}
.container { font-size: 1.6rem; padding: 2em;}
html { font-size: 62.5%;}
#wrap { position: relative; overflow: hidden; width: 100%;}
#header { background: #333; height: 100%; left: 0; overflow: auto; position: absolute; top: 0; width: 100%; -webkit-overflow-scrolling: touch;
}
#header ul a { color: #fff; display: inline-block; font-size: 1.6rem; padding: 1em; text-decoration: none;
}
#header a:hover { color:#0099CC;}
#header ul { margin: 0; padding: 0;}
#header li { display: block; list-style: none;}
#content { box-shadow: 0 0 10px rgba(0,0,0,0.75); background: #fff; position: relative; width: 100%; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease 0s;
}
#footer { background: #000; color: #fff; display: block; font-size: 1.6rem; padding: 1em;
}
#wrap:target #content,
.nav-open #content { transform: translate3d(86%, 0px, 0px);}
.button { background: #000; color: #CCC; display: block; font-size: 1.8rem; padding: 1em; text-decoration: none; width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Panel Navigation - Script Codes JS Codes

$(window).load(function(){	$('.button').click(function (e) {	e.preventDefault();	if ($('#wrap').hasClass('nav-open')) {	closeNav();	} else {	showNav();	}	});	});	// Menu handlers as functions, in case you want to call them on many different events.	function closeNav(){	$('#wrap').removeClass('nav-open');	}	function showNav(){	$('#wrap').addClass('nav-open');	}
Panel Navigation - Script Codes
Panel Navigation - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 4,288 Kb
Views 22,264
Do you need developer help for Panel 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!

Jon Christensen (JMChristensen) Script Codes
Name
Table Cell Slideshow
Vue JS Filtering
SVG Text Masking
Google Button Ripple
Simple CSS Loaders
SVG Circle Progress
Image Cover
SVG Button Animation
Custom Stagger Start Point
3D Cube
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!