Animating Hamburger Slide Out Menu

Developer
Melissa L
Size
5,838 Kb
Views
18,216
  1. Animating Hamburger Slide Out Menu Previews
  2. Animating Hamburger Slide Out Menu HTML Codes
  3. Animating Hamburger Slide Out Menu CSS Codes
  4. Animating Hamburger Slide Out Menu JS Codes

How do I make an animating hamburger slide out menu?

A combination of Slide Out Menu (http://codepen.io/mattaxell/pen/zaved) and Animating CSS Only Hamburger Menu Icons (http://callmenick.com/post/animating-css-only-hamburger-menu-icons). What is a animating hamburger slide out menu? How do you make a animating hamburger slide out menu? This script and codes were developed by Melissa L on 29 October 2022, Saturday.

Animating Hamburger Slide Out Menu Previews
IQ Test

Animating Hamburger Slide Out Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> Animating Hamburger Slide Out Menu </title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="site" class="site"> <nav> <button class="c-hamburger c-hamburger--htx"> <span>toggle menu</span> </button> <!--<div class="menu-toggle"> <i class="fa fa-bars"></i> </div>--> <div id="navigation"> <img src="http://www.fillmurray.com/g/200/200" class="round"> <h3>Title Here</h3> <p>Fashion axe normcore flannel duis listicle. Truffaut banjo retro McSweeney's kitsch +1. Labore master cleanse readymade, American Apparel vero sartorial vinyl keytar ullamco dolor sustainable Godard mollit. </p> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Work</a></li> <li id='last'><a href="#">Contact</a></li> </div> </nav> <div class="page row"> <h1 class="large-12 medium-12">Site Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu lacus faucibus, vehicula sapien eu, maximus metus. Nam et nibh ut erat consectetur varius viverra sodales ipsum. Nulla dictum facilisis eros, ac viverra risus vehicula quis. Sed elementum dolor et ex tincidunt suscipit. Nam in consequat nibh. Fusce sem risus, pulvinar non porta vel, egestas sed purus. Cras scelerisque turpis sapien, at fringilla sapien aliquam et. Donec eleifend enim id felis sagittis, at aliquet nisl molestie. Morbi non fermentum velit. Maecenas a accumsan magna. Suspendisse a tristique odio. Morbi porta sapien vel lorem viverra, quis venenatis odio pretium. Praesent consectetur ex at viverra mollis. Aenean mi libero, posuere vitae posuere eu, finibus sit amet diam. Proin finibus ex non leo aliquam, sit amet tincidunt lacus bibendum.</p> <p>Vivamus orci dolor, mattis id nibh ac, mollis ultricies risus. Nulla hendrerit dui sit amet dui accumsan, ac interdum est ornare. Fusce mattis non massa in fermentum. Morbi id massa justo. Donec sodales leo vel ex blandit, in vulputate ex pretium. Nulla maximus diam eget lacus rutrum, et euismod odio blandit. Pellentesque dapibus, dolor non convallis maximus, arcu arcu volutpat ligula, vel condimentum ipsum sapien luctus diam. Sed laoreet tincidunt orci. Integer congue nunc id enim varius placerat.</p> <p>Donec at maximus tortor. Fusce scelerisque aliquet libero, nec viverra neque auctor ac. Vestibulum massa nibh, pharetra eget euismod ac, finibus in quam. Nam eget lacus sit amet urna accumsan molestie sed ac dolor. Donec in vulputate justo, sed mollis ipsum. Nam iaculis consequat turpis, id lacinia ipsum sodales in. Praesent fermentum turpis in diam facilisis dapibus. Maecenas pellentesque velit at ex luctus pharetra. Suspendisse a magna lacus. Nullam massa nunc, laoreet eu dolor sed, interdum iaculis massa. Nam ultricies augue quis nisi faucibus, ut pharetra lorem ullamcorper. Duis vitae varius risus, ac lobortis justo. Quisque id auctor risus. Nulla accumsan turpis quis turpis tincidunt lobortis.</p> <p>Ut pellentesque consequat sem, et tempus est interdum sed. Vestibulum at nisi ut quam porttitor suscipit id a arcu. Nulla consequat non elit nec mattis. Praesent nec nisi odio. Vestibulum non sollicitudin massa. Mauris vitae blandit urna, vel consequat felis. Donec odio mauris, blandit vel erat lacinia, eleifend consequat magna. Donec volutpat est sit amet lacinia euismod. Nulla eget augue sit amet nisi vulputate gravida ut eget augue. Nulla facilisi. Quisque commodo dolor vitae condimentum ultrices. Nam luctus nunc et mi cursus, rutrum convallis ipsum porttitor. Praesent risus risus, euismod vel venenatis eget, rhoncus ut diam. Curabitur tincidunt leo nunc, quis ornare libero laoreet vitae. Nullam vitae turpis dignissim, sollicitudin eros vitae, laoreet ex. Vivamus vestibulum viverra augue, non maximus nisi molestie in.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nisl at blandit pharetra. Fusce lobortis velit nec lorem congue, ac hendrerit nibh scelerisque. Nullam nec tincidunt magna. Quisque commodo vitae mi vitae luctus. Vestibulum non laoreet lorem, eget suscipit nunc. Fusce vulputate augue non erat iaculis, ac consectetur lorem lacinia. Donec sit amet enim a ante rutrum sagittis. Ut luctus turpis eget felis hendrerit iaculis. Suspendisse vehicula odio vel sapien congue, ac sagittis nisl molestie. Nam vulputate tempor magna quis faucibus. Quisque nec tellus diam. Nam vel nisl tincidunt, lobortis dolor eu, porta nunc. Pellentesque sit amet mauris commodo, ultricies est euismod, pulvinar ipsum. Morbi venenatis venenatis massa ac semper. </p> </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>

Animating Hamburger Slide Out Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body,
html { font-family: 'Open Sans';
}
#navigation h3 { color: #ffffff; padding: 30px 0 0;
}
#navigation { position: fixed; top: 0px; right: 0px; display: none; width: 400px; height: 100%; overflow: scroll; margin: 0; margin-right: -400px; padding: 50px 40px 0; background: #000000; color: #ffffff; list-style: none; text-align: center;
}
li#last { padding-bottom: 200px;
}
nav a { color: #ffffff; font-weight: bold; line-height: 3; text-decoration: none;
}
.round { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 0px solid #000000;
}
.c-hamburger { display: block; border: 1px solid red; position: fixed; right: 40px; overflow: hidden; margin: 0; padding: 0; width: 60px; height: 40px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; z-index: 100; background: none !important;
}
.c-hamburger:focus { outline: none;
}
.c-hamburger span { display: block; position: absolute; top: 22px; left: 15px; right: 15px; height: 4px; background: #cccccc;
}
.c-hamburger span::before,
.c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: #cccccc; content: "";
}
.c-hamburger span::before { top: -10px;
}
.c-hamburger span::after { bottom: -10px;
}
.c-hamburger--htx { background-color: #ffffff;
}
.c-hamburger--htx span { transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before { transition-property: top, transform;
}
.c-hamburger--htx span::after { transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active { background-color: #ffffff;
}
.c-hamburger--htx.is-active span { background: none;
}
.c-hamburger--htx.is-active span::before { top: 0; transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after { bottom: 0; transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after { transition-delay: 0s, 0.3s;
}

Animating Hamburger Slide Out Menu - Script Codes JS Codes

(function() { "use strict"; var toggles = document.querySelectorAll(".c-hamburger"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener( "click", function(e) { //e.preventDefault(); if(this.classList.contains("is-active") === true){ var navwidth = ($("#navigation").width()); var shortsitewidth = ($("#site").width()); var fullsitewidth = shortsitewidth + navwidth; this.classList.remove("is-active"), $("#navigation").animate({marginRight: - navwidth}, 370).fadeOut(1000); $("#site").animate({width: fullsitewidth}, 370); }else{ var navwidth = ($("#navigation").width()); var fullsitewidth = ($("#site").width()); var shortsitewidth = fullsitewidth - navwidth; this.classList.add("is-active"), $("#navigation").fadeIn(0).animate({marginRight: "0px"},370); $("#site").animate({width: shortsitewidth}, 370); }; // if }); //event listener } // function toggleHandler
})(); // function
Animating Hamburger Slide Out Menu - Script Codes
Animating Hamburger Slide Out Menu - Script Codes
Home Page Home
Developer Melissa L
Username melissall
Uploaded October 29, 2022
Rating 3
Size 5,838 Kb
Views 18,216
Do you need developer help for Animating Hamburger Slide 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!

Melissa L (melissall) Script Codes
Name
Angular from Lynda.com
A Pen by Melissa L
Animated Drop Down Nav
Image Zoom from Medium.com
Isotope Layout 1
Webflow Interactions
One Pager
Contact form
Create amazing love letters 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!