Mobile Navigation Menus - Menu slide from left
How do I make an mobile navigation menus - menu slide from left?
A menu that slides from the left. All sub menu items initially opened. . What is a mobile navigation menus - menu slide from left? How do you make a mobile navigation menus - menu slide from left? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.
Mobile Navigation Menus - Menu slide from left Previews
Mobile Navigation Menus - Menu slide from left - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Navigation Menus - Menu slide from left</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="web-container"> <!--Main nav menu --> <nav class="nav-menu-wrap"> <ul class="nav-menu menu"> <li class="close"> <div>Close Menu <i class="fa icon fa-times"></i></li> <li><a href="#">Home</a></li> <li><a href="#">Stuff and things</a> <ul class="sub-menu menu"> <li><a href="#">Stuff</a></li> <li><a href="#">Things</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Some menu item with a very long name</a></li> <li><a href="#">Services</a> <ul class="sub-menu menu"> <li><a href="#">Engineering</a></li> <li><a href="#">Development</a></li> <li><a href="#">Physics</a> <ul class="sub-menu menu"> <li><a href="#">Astro Physics </a></li> <li><a href="#">Chemical Physics </a></li> </ul> </li> </ul> </li> </ul> </nav> <div class="nav-menu-background"></div> <article class="main-container"> <section> <div class="nav-menu-toggle"> <i class="fa fa-bars toggle"></i> </div> </section> <h2> Aiquam dignissim enim egestas eget</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at risus vulputate, porttitor nunc eu, hendrerit nulla. Morbi efficitur rhoncus malesuada. Aliquam quis nulla neque. Ut pulvinar augue viverra cursus auctor. Integer tincidunt ultricies</p> <p> felis, aliquam dignissim enim egestas eget. Praesent dignissim, quam sit amet interdum auctor, diam odio eleifend augue, sed facilisis risus nisi vel odio. Integer eget hendrerit neque. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at risus vulputate, porttitor nunc eu, hendrerit nulla. Morbi efficitur rhoncus malesuada. Aliquam quis nulla neque. Ut pulvinar augue viverra cursus auctor. Integer tincidunt ultricies</p> <h2>Integer tincidunt ultricies</h2> <p> felis, aliquam dignissim enim egestas eget. Praesent dignissim, quam sit amet interdum auctor, diam odio eleifend augue, sed facilisis risus nisi vel odio. Integer eget hendrerit neque.</p> <p> felis, aliquam dignissim enim egestas eget. Praesent dignissim, quam sit amet interdum auctor, diam odio eleifend augue, sed facilisis risus nisi vel odio. Integer eget hendrerit neque.</p> <p> felis, aliquam dignissim enim egestas eget. Praesent dignissim, quam sit amet interdum auctor, diam odio eleifend augue, sed facilisis risus nisi vel odio. Integer eget hendrerit neque.</p> <p> felis, aliquam dignissim enim egestas eget. Praesent dignissim, quam sit amet interdum auctor, diam odio eleifend augue, sed facilisis risus nisi vel odio. Integer eget hendrerit neque.</p> </article> </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>
Mobile Navigation Menus - Menu slide from left - Script Codes CSS Codes
/*border box layout*/
*,
*:before,
*:after { -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
}
/*container for the whole website*/
.web-container{ max-width: 500px; position: relative;
}
/*main container for content*/
.main-container{ z-index: 1; position: relative;
}
/*container for the nav*/
.nav-menu-wrap { position: absolute; top: 0px; height: 100%; width: 65%; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; z-index: 3; -moz-transform: translate3d(-100%,0px,0px) rotate(90deg); -webkit-transform: translate3d(-100%,0px,0px) rotate(90deg); -ms-transform: translate(-100%,0%) rotate(90deg); -o-transform: translate(-100%,0%) rotate(90deg); transform: translate3d(-100%,0px,0px) rotate(90deg); -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%;
}
.nav-menu-wrap.active{ -moz-transform: translate3d(0%,0px,0px) rotate(0deg); -webkit-transform: translate3d(0%,0px,0px) rotate(0deg); -ms-transform: translate(0%,0%) rotate(0deg); -o-transform: translate(0%,0%) rotate(0deg); transform: translate3d(0%,0px,0px) rotate(0deg);
}
/*nav menu background*/
.nav-menu-background{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #222; background: rgba(0,0,0,0.75); opacity: 0; -webkit-transition: opacity 400ms ease-in-out; -moz-transition: opacity 400ms ease-in-out; -o-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 0;
}
.nav-menu-background.active{ opacity: 1; z-index: 2;
}
.menu { margin: 0px; padding: 0px; height: auto;
}
.nav-menu { position: relative; top: 0px; width: 100%; height:100%; overflow:hidden; overflow-y:auto; background: #eee;
}
.nav-menu li { list-style-type: none; display: block; position: relative;
}
.nav-menu li > a { display: block; color: #333; text-decoration: none; padding: 10px 15px; border-top: solid 1px #ccc; position: relative; background: #eee; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
}
.nav-menu li > a:hover,
.nav-menu li > a:active{ background: #ccc;
}
/*Nav menu toggle*/
.nav-menu-toggle { border: solid 1px #ddd; background: #ccc; height: 35px; width: 35px; display: inline-block; text-align: center; cursor: pointer; margin-bottom: 15px; z-index: 999;
}
.nav-menu-toggle .toggle { color: #fff; line-height: 35px; font-size: 150%;
}
/*Close menu items*/
.nav-menu .close div{ padding: 10px 15px; cursor: pointer; background: #ccc; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
}
.nav-menu .close div:hover,
.nav-menu .close div:active{ background: #aaa;
}
.nav-menu .close div i{ float: right;
}Mobile Navigation Menus - Menu slide from left - Script Codes JS Codes
/*Script functionality*/
$(document).ready(function() { //GLOBALS var nav_menu = $('.nav-menu'); var nav_menu_wrap = $('.nav-menu-wrap'); var nav_menu_background = $('.nav-menu-background'); //toggle the active states function toggle_menu() { nav_menu_wrap.toggleClass('active'); nav_menu_background.toggleClass('active'); } //toggling activate state when interacting with elements $('.nav-menu-toggle, .nav-menu-background, .nav-menu .close').on('click', function() { toggle_menu(); }); //sets the height of the menu to be the same height as the body function set_menu_height() { var body_height = $('body').height(); nav_menu.height(body_height); } set_menu_height(); //if we change orientation or resize, reculate menu $(window).resize(function() { set_menu_height(); }) //INDENTING //go through the menu and add indenting function add_menu_depth() { var menus = $('.menu'); //set depth width to be 5% of the nav menu var pad_depth = (nav_menu.outerWidth() / 20); //if we have menus if (menus.length != 0) { $.each(menus, function() { var depth_count = $(this).parents('.menu').length + 1; var child_elements = $(this).find('li > a'); $.each(child_elements, function() { $(this).css('padding-left', depth_count * pad_depth); }); }) } } add_menu_depth();
});
| Developer | Simon Codrington |
| Username | simoncodrington |
| Uploaded | October 01, 2022 |
| Rating | 3 |
| Size | 3,701 Kb |
| Views | 28,336 |
Do you need developer help for Mobile Navigation Menus - Menu slide from left?
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!
Simon Codrington (simoncodrington) Script Codes
| Name | Size |
| CSS animations on scroll - Multi step move | 4,438 Kb |
| Foundation 6 - Motion UI | 1,984 Kb |
| Mobile Navigation Menus - Scale from 0 to 1 open | 3,968 Kb |
| Video API Interactive Showcase | 6,047 Kb |
| CSS Pulsating Sonar | 2,578 Kb |
| CSS animations on scroll - Fade from bottom up | 4,729 Kb |
| Foundation 6 - Flex Grid | 3,805 Kb |
| Animating single characters in a string | 2,798 Kb |
| Fancy Card Animation | 2,419 Kb |
| Stripe Header Grid | 4,140 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Colorful Sliders | Chanrith | 1,246 Kb |
| Comment Jquery | SquishyAndroid | 2,421 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Simple Buttons | Haydenmills | 1,750 Kb |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| 404 Error Page | WebSonick | 3,203 Kb |
| A Pen by aleen42 | Aleen42 | 11,473 Kb |
| Webkit decolorize | Fivera | 1,675 Kb |
| Minimal Menu | Achudars | 3,430 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!