Mobile Navigation Menus - Scale from 0 to 1 open

Developer
Simon Codrington
Size
3,968 Kb
Views
18,216
  1. Mobile Navigation Menus - Scale from 0 to 1 open Previews
  2. Mobile Navigation Menus - Scale from 0 to 1 open HTML Codes
  3. Mobile Navigation Menus - Scale from 0 to 1 open CSS Codes
  4. Mobile Navigation Menus - Scale from 0 to 1 open JS Codes

How do I make an mobile navigation menus - scale from 0 to 1 open?

Navigation menu where opening the menu makes the menu scale from 0 to its correct size. What is a mobile navigation menus - scale from 0 to 1 open? How do you make a mobile navigation menus - scale from 0 to 1 open? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Mobile Navigation Menus - Scale from 0 to 1 open Previews
IQ Test

Mobile Navigation Menus - Scale from 0 to 1 open - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Navigation Menus - Scale from 0 to 1 open </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"> <div class="nav-menu-background"></div> <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> <i class="fa fa-angle-right sub-menu-toggle"></i> <ul class="sub-menu menu"> <li class="close"> <div>Close Menu <i class="fa icon fa-times"></i> </div> </li> <li><a href="#">Stuff</a></li> <li><a href="#">Things</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Read More</a></li> <li><a href="#">Services</a> <i class="fa fa-angle-right sub-menu-toggle"></i> <ul class="sub-menu menu"> <li class="close"> <div>Close Menu <i class="fa icon fa-times"></i> <li><a href="#">Engineering</a></li> <li><a href="#">Development</a></li> <li><a href="#">Physics</a> <i class="fa fa-angle-right sub-menu-toggle"></i> <ul class="sub-menu menu"> <li class="close"> <div>Close Menu <i class="fa icon fa-times"></i> <li><a href="#">Astro Physics </a></li> <li><a href="#">Chemical Physics </a></li> </ul> </li> </ul> </li> </ul> </nav> <article class="main-container"> <section class=""> <div class="nav-menu-toggle"> <i class="fa fa-bars toggle"></i> </div> </section> <h2>Ut pulvinar augue</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. </p> <p>Ut pulvinar augue viverra cursus auctor. Integer tincidunt ultricies 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>Donec arcu elit, scelerisque id mi ut, ullamcorper efficitur mi. Curabitur faucibus lacus nec dolor ornare, semper laoreet ante cursus. Fusce quis mauris accumsan dolor ultrices fringilla. Sed nulla est, semper a ipsum a, dignissim pellentesque mauris. Nam imperdiet venenatis sem, eget feugiat quam pretium in. Vivamus mauris risus, porta ultricies congue nec, bibendum in sem. Nul</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 - Scale from 0 to 1 open - Script Codes CSS Codes

/*box sizing*/
*,
*:before,
*:after { 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{ max-width: 500px; z-index: 2; position: relative;
}
/*Nav menu styling*/
.nav-menu-wrap { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; padding: 20px;
}
.nav-menu-wrap.active{ z-index: 3;
}
/*nav menu background*/
.nav-menu-wrap .nav-menu-background{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0); -webkit-transition: background 300ms linear; -moz-transition: background 300ms linear; transition: background 300ms linear;
}
.nav-menu-wrap.active .nav-menu-background{ background: rgba(0,0,0,0.75);
}
.nav-menu { width: 100%; height: auto; position: absolute; overflow: hidden; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); -moz-transform: scale3d(0.5,0.5,1); -ms-transform: scale(0.5,0.5); -o-transform: scale(0.5,0.5); transform: scale3d(0.5,0.5,1);
}
.nav-menu.active{ -webkit-transform: scale3d(1,1,1); -moz-transform: scale3d(1,1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale3d(1,1,1); opacity: 1;
}
.nav-menu,
.sub-menu { margin: 0px; padding: 0px; position: relative; background: #eee;
}
.nav-menu li { list-style-type: none; display: block; background: transparent; float: left; width: 100%; border-top: solid 1px #ccc; background: #eee;
}
.nav-menu li:last-child{ border-bottom: 1px solid #ccc;
}
.nav-menu li > a { display: block; color: #333; text-decoration: none; padding: 10px 15px; position: relative; float: left; width: 80%; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease;
}
.nav-menu li > a:hover { background: #ccc;
}
.nav-menu .sub-menu-toggle { display: none;
}
/*Sub nav menus*/
.nav-menu .sub-menu { display: block; width: 100%; position: absolute; top: 0px; left: 100%; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; transition: all 400ms ease-in; z-index: 5; -moz-transform: translate3d(0%,0px,0px); -webkit-transform: translate3d(0%,0px,0px); -ms-transform: translate(0%,0px); -o-transform: translate(0%,0px); transform: translate3d(0%,0px,0px);
}
.nav-menu .sub-menu.active{ -moz-transform: translate3d(-100%,0px,0px); -webkit-transform: translate3d(-100%,0px,0px); -ms-transform: translate(-100%,0px); -o-transform: translate(-100%,0px); transform: translate3d(-100%,0px,0px);
}
/*Sub menu toggle*/
.nav-menu .sub-menu-toggle { position: relative; top: 0px; right: 0px; color: #fff; background: #ccc; display: block; float: left; cursor: pointer; width: 20%; text-align: center
}
.nav-menu .sub-menu-toggle:hover,
.nav-menu .sub-menu-toggle:active{ background: #ddd;
}
.nav-menu .sub-menu-toggle:before{ display: inline-block; -webkit-transition: all 300ms linear; -o-transition: all 300ms linear; -moz-transition: all 300ms linear -ms-transition: all 300ms linear; transition: all 300ms linear;
}
.nav-menu .sub-menu-toggle.flip:before{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg);
}
/*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;
}
.nav-menu .close div:hover{ background: #aaa;
}
.nav-menu .close div i{ float: right;
}

Mobile Navigation Menus - Scale from 0 to 1 open - Script Codes JS Codes

/*Script functionality*/
$(document).ready(function() { //GLOBALS var nav_menu = $('.nav-menu'); //main menu toggle $('.nav-menu-toggle').on('click', function() { nav_menu.toggleClass('active'); nav_menu.parent('.nav-menu-wrap').toggleClass('active'); }); //sub menu toggle $('.sub-menu-toggle').on('click', function() { var sub_menu = $(this).siblings('.sub-menu'); sub_menu.toggleClass('active'); set_sub_menu_toggles(); set_sub_menu_height(); }); //sets all sub-menus to be as long as the main nav menu function set_sub_menu_height() { var menu_height = nav_menu.outerHeight(); var sub_menus = $('.sub-menu'); $.each(sub_menus, function() { $(this).outerHeight(menu_height); }); } //close sub menu $('.sub-menu > .close').on('click', function() { $(this).parent('.sub-menu').toggleClass('active'); }); //Close the menu if selecting close item or background $('.nav-menu-background, .nav-menu > .close').on('click', function() { $('.nav-menu, .nav-menu-wrap').removeClass('active'); }); //SUB MENU TOGGLE HEIGHT //set the height of the sub-menu toggle perfectly function set_sub_menu_toggles() { var sub_menu_toggles = $('.sub-menu-toggle'); $.each(sub_menu_toggles, function() { $(this).outerHeight($(this).siblings('a').outerHeight()); $(this).css('line-height', $(this).siblings('a').outerHeight() + 'px'); }); } set_sub_menu_toggles();
});
Mobile Navigation Menus - Scale from 0 to 1 open - Script Codes
Mobile Navigation Menus - Scale from 0 to 1 open - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 3,968 Kb
Views 18,216
Do you need developer help for Mobile Navigation Menus - Scale from 0 to 1 open?

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
Animating single characters in a string
CSS Snap Scroll Points - Full Screen Scroller
Foundation 6 - Flex Grid
CSS animations on scroll - Multi step move
CSS animations on scroll - Slide in from left
Stripe Header Grid
Test iFrame
CSS animations on scroll - Fade from bottom up
Video API Interactive Showcase
Fancy Card Animation
Create amazing marketing copy 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!