Ultimate Pop-Out Menu

Developer
Matt Litherland
Size
4,264 Kb
Views
40,480
  1. Ultimate Pop-Out Menu Previews
  2. Ultimate Pop-Out Menu HTML Codes
  3. Ultimate Pop-Out Menu CSS Codes
  4. Ultimate Pop-Out Menu JS Codes

How do I make an ultimate pop-out menu?

I built this navigation strictly for a Mobile Web App, it utilises hardware acceleration and is cross device compatible. I have testest on iPhone4+, Nexus 4, Blackberry Z10. It also works beautifully on Webkit Browsers, Chrome & Safari, has been tested in Firefox. I have not tested in IE as it was never intended for web. . What is a ultimate pop-out menu? How do you make a ultimate pop-out menu? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Ultimate Pop-Out Menu Previews
IQ Test

Ultimate Pop-Out Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html class="mobile">
<head> <meta charset="UTF-8"> <title>Ultimate Pop-Out Menu</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, minimum-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://getbootstrap.com/dist/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="view"> <!-- Menu --> <div id="menu" class="slide"> <nav> <ul> <li><a href="#">Section A Link</a></li> <li><a href="#">Section A Link</a></li> <li><a href="#">Section A Link</a></li> <li><a href="#">Section A Link</a></li> <li class="divider"></li> <li><a href="#">Section B Link</a></li> <li><a href="#">Section B Link</a></li> <li><a href="#">Section B Link</a></li> <li><a href="#">Section B Link</a></li> <li class="divider"></li> <li><a href="#">Section C Link</a></li> <li><a href="#">Section C Link</a></li> <li><a href="#">Section C Link</a></li> <li><a href="#">Section C Link</a></li> <li class="divider"></li> <li><a href="#">Dribbble</a></li> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Google+</a></li> </ul> </nav> </div> <!-- Content --> <article id="content" class="slide"> <div id="bar"> <a href="#" id="trigger"> <span class="glyphicon glyphicon-align-justify"></span> </a> </div> <div class="pad20"> <div class="box"> <div class="pad20"> <h1><span class="glyphicon glyphicon-star"></span> Mobile Menu</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> </div> <div class="box"> <div class="pad20"> <h2>Twitter: @mattsince87</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> </div> <div class="box"> <div class="pad20"> <h2>Looking good!</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> </div> <div class="box"> <div class="pad20"> <h2>Looking good!</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </div> </article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ultimate Pop-Out Menu - Script Codes CSS Codes

/* --------------------------- Fonts & Page ------------------------ */
html.mobile { overflow-x: hidden;}
body { margin: 0; background: #f2f3ea ; font-family: sans-serif; width: 100%;}
h1, h2, h3, h4, h5 { font-family: "Roboto"; color: #dd8673;}
p { font-size: 16px; font-family: "Open Sans", sans-serif; color: #454545;}
/* --------------------------- SuperFly Menu ------------------------ */
#view { display: block; position: relative; width: 100%; height: 100%;} #view.onmenu { overflow: hidden; /* Prevent viewport scrolling when viewing menu */}
#content { float: left; width: 100%; height: 100%; position: absolute; background: #f2f3ea; top: 0; left: 0; -webkit-transition: all 0.2s ease-out; /* Safari & Chrome */ -moz-transition: all 0.2s ease-out; /* Firefox */ -ms-transition: all 0.2s ease-out; /* IE9 */ -o-transition: all 0.2s ease-out; /* Opera */ transition: all 0.2s ease-out; -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */ -moz-transform: translate3d(0,0,0); /* Firefox */ -ms-transform: translate3d(0,0,0); /* IE9 */ -o-transform: translate3d(0,0,0); /* Opera */ transform: translate3d(0,0,0);} #content.toggle { position: absolute; z-index: 0; -webkit-transition: all 0.2s ease-out; /* Same as #menu */ -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translate3d(84%,0,0); -moz-transform: translate3d(84%,0,0); -ms-transform: translate3d(84%,0,0); -o-transform: translate3d(84%,0,0); transform: translate3d(84%,0,0);} #content .box { float: left; width: 100%; margin-bottom: 25px; background: #fff;}
/* iOS Fix */
#content.iOS,
#menu ul.iOS { overflow-y: scroll; /* Enable vertical scroll */ -webkit-overflow-scrolling: touch; /* Fixes iOS scroll bug */}
/* Padding */
.pad20 { padding: 80px 20px 20px 20px; /* Include 60px for #bar height */}
.box .pad20 { padding-top: 20px;}
#menu { display: block; width: 100%; height: 100%; background: #131f20 ; box-shadow: inset -5px 0px 20px -5px rgba(0,0,0,0.5); position: absolute; /* Fixes body width bug */ /*Translate Positioning*/ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} #menu.toggle { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translate3d(-16%,0,0); -moz-transform: translate3d(-16%,0,0); -ms-transform: translate3d(-16%,0,0); -o-transform: translate3d(-16%,0,0); transform: translate3d(-16%,0,0);} #menu nav { display: block; position: relative;} #menu ul, #menu li { padding: 0; margin: 0; float: left; width: 100%;} #menu ul { float: left; display: block; overflow: hidden; overflow-y: scroll; width: 100%; height: 100%; padding: 50px 0px 0px 0px;} #menu ul li { float: left; width: 100%; clear: both; list-style-type: none; text-indent: 20%; font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 48px; font-weight: 300;}
#menu ul li.divider { width: 100%; margin: 15px 10% !important; height: 2px; line-height: 2px; font-size: 0px; background: #5b6a67; opacity: 0.15;} #menu ul li:last-child { margin-bottom:50px;} #menu li a { display: block; color: #5b6a67; text-decoration: none;} #menu li a:hover { color: #fff;}
/* Bar */
#bar { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 60px; background: #4c5d5f;}
/* Trigger */
#trigger { display: block; position: absolute; top: 0px; left: 0px; height: 20px; width: 20px; padding: 20px; text-align: center; text-decoration: none; font-weight: bold; color: #fff; font-size: 20px; line-height: 20px;}

Ultimate Pop-Out Menu - Script Codes JS Codes

// Toggle Classes
$('#trigger').bind('click', function(e) { e.preventDefault(); $(this).toggleClass('toggle'); $('#menu').toggleClass('toggle'); $('#content').toggleClass('toggle'); $('#view').toggleClass('onmenu');
});
// Fire Up resizeDiv
$(document).ready(function(){ resizeDiv();
});
// Re-Run resizeDiv() on orientation change
window.onresize = function(event) { resizeDiv();
}
// Resize Function
function resizeDiv() { vpw = $(window).width(); vph = $(window).height(); vpha = $(window).height(); $('#menu').css({'height': vph + 'px'}); $('#menu ul').css({'height': vpha + 'px'}); $('#view').css({'height': vph + 'px'});
}
// Detect iOS
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { $('#content').addClass('iOS'); $('#menu ul').addClass('iOS');
}
Ultimate Pop-Out Menu - Script Codes
Ultimate Pop-Out Menu - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 3.5
Size 4,264 Kb
Views 40,480
Do you need developer help for Ultimate Pop-Out Menu?

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!

Matt Litherland (mattsince87) Script Codes
Name
Smooth Anchor Scrolling
Share Your Profile
Animated Resposnive SVG Path
SCSS Social Icons Flat
SVG Firework Animation
Node Waves
Animated CSS3 Mobile Phone
Wishlist Toggle Button
Animated SVG Path
Vertical Align Images - Explained
Create amazing SEO content 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!