Menu Animation - push in

Developer
Mario Duarte
Size
4,401 Kb
Views
48,576
  1. Menu Animation - push in Previews
  2. Menu Animation - push in HTML Codes
  3. Menu Animation - push in CSS Codes
  4. Menu Animation - push in JS Codes

How do I make an menu animation - push in?

Simple menu animation that pushes in the page. What is a menu animation - push in? How do you make a menu animation - push in? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Menu Animation - push in Previews
IQ Test

Menu Animation - push in - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Animation - push in</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="top-browser">	<div class="br-close"><i class="fa fa-circle" aria-hidden="true"></i></div>	<div class="br-minimize"><i class="fa fa-circle" aria-hidden="true"></i></div>	<div class="br-resize"><i class="fa fa-circle" aria-hidden="true"></i></div>	</div>	<div class="menu">	<div class="inner">	<i class="fa fa-bars js-toggle-nav" aria-hidden="true"></i>	</div>	</div>	<div class="navigation js-navigation">	<ul class="nav">	<li><a href="#">Home</a></li>	<li><a href="#">About</a></li>	<li><a href="#">Services</a></li>	<li><a href="#">Contacts</a></li>	</nav>	</div>	<div class="browser-body js-browser-body">	<div class="inner">	<h1>Menu animation</h1>	<p>Bear claw bear claw croissant marzipan croissant topping sweet roll. Chocolate cake dragée macaroon jelly beans candy caramels danish candy cheesecake. Donut ice cream chocolate cake dessert sweet roll biscuit. Cotton candy caramels lemon drops marzipan.	Candy tart tart jelly pudding macaroon. Liquorice lemon drops oat cake carrot cake carrot cake marzipan. Cake bear claw sweet.</p>	<div class="layout">	<div class="single"></div>	<div class="single"></div>	<div class="single"></div>	</div>	</div>	</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu Animation - push in - Script Codes CSS Codes

body { margin: 0; padding: 0 20px; font-family: 'helvetica', sans-serif; height: 100%; background-color: #f8f8f8; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-trasform: translate3d(0, 0, 0);
}
.container { width: 100%; max-width: 800px; min-height: 450px; background-color: #555555; position: relative; margin: 60px auto; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.container .top-browser { background-color: #eeeeee; padding: 5px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.container .top-browser .br-close { color: #c0392b; padding: 0 5px;
}
.container .top-browser .br-close:hover { color: #d65548;
}
.container .top-browser .br-minimize { color: #eb9950; padding: 0 5px;
}
.container .top-browser .br-minimize:hover { color: #eea667;
}
.container .top-browser .br-resize { color: #16a085; padding: 0 5px;
}
.container .top-browser .br-resize:hover { color: #1ccdaa;
}
.container .menu { width: 100%; position: relative; background-color: #ffffff; border-bottom: 1px solid #999999;
}
.container .menu i { color: #555555; padding: 10px 20px; transition: color 0.8s ease; -webkit-transition: color 0.8s ease; -moz-transition: color 0.8s ease; -ms-transition: color 0.8s ease;
}
.container .menu i:hover { cursor: pointer; color: #000000;
}
.container .navigation { transform: translateX(-150px); -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -ms-trasform: translateX(-150px); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -ms-transition: transform 0.4s ease-in-out; width: 150px; position: absolute; top: 65px; left: 0; bottom: 0; background-color: #dddddd; z-index: 9;
}
.container .navigation .nav { padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row; flex-flow: row; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.container .navigation .nav li { width: 100%; list-style: none; text-align: center;
}
.container .navigation .nav li a { display: inline-block; width: 100%; text-decoration: none; color: #555555; padding: 10px 0px; border-bottom: 1px solid #555555;
}
.container .navigation .nav li a:hover { background-color: #555555; color: #ffffff;
}
.container .navigation .nav li:last-child a { border: none;
}
.container .navigation.open { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-trasform: translateX(0px);
}
.container .browser-body { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; position: absolute; top: 65px; left: 0; right: 0; bottom: 0; background: #eeeeee; z-index: 8;
}
.container .browser-body .inner { padding: 20px; color: #555555;
}
.container .browser-body .inner h1 { margin: 0; font-weight: lighter;
}
.container .browser-body .inner .layout { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row; flex-flow: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.container .browser-body .inner .layout .single { width: 30%; height: 100px; background-color: #dddddd;
}
.container .browser-body.open-nav { top: 90px; left: 175px; right: 25px; bottom: 25px;
}

Menu Animation - push in - Script Codes JS Codes

// WOW!!! so little js!
$('body').on('click', '.js-toggle-nav', function(e){	e.preventDefault();	$('.js-navigation').toggleClass('open');	$('.js-browser-body').toggleClass('open-nav');	});
//Yes that's it!
Menu Animation - push in - Script Codes
Menu Animation - push in - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 4,401 Kb
Views 48,576
Do you need developer help for Menu Animation - push in?

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!

Mario Duarte (MarioDesigns) Script Codes
Name
3D Cube - Pure CSS
The Dark - CSS animated background
JavaScript Lesson - Todo list
3D Pyramid Animation
Flying Bird Animation
Hamburger Menu Animation
Door Animation
SoundCloud Custom Player
Element Card - Group 11 element
Relative Mouse Position
Create amazing art & images 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!