Animating Hamburger menu

Developer
Kacper Bawol
Size
2,898 Kb
Views
34,408
  1. Animating Hamburger menu Previews
  2. Animating Hamburger menu HTML Codes
  3. Animating Hamburger menu CSS Codes
  4. Animating Hamburger menu JS Codes

How do I make an animating hamburger menu?

What is a animating hamburger menu? How do you make a animating hamburger menu? This script and codes were developed by Kacper Bawol on 03 September 2022, Saturday.

Animating Hamburger menu Previews
IQ Test

Animating Hamburger menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating Hamburger menu</title> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav-bars"> <a id="trigger" href="#open"></a> <ul class="menu"> <li><a href="#about">ABOUT</a></li> <li><a href="#libl">LIBRARY</a></li> <li><a href="#work">WORK</a></li> </ul> <svg id="svg-menu" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animating Hamburger menu - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body,
html { background-color: lightgrey; width: 100%; height: 100%; margin: 0; padding: 0;
}
.nav-bars { position: fixed; top: 0; right: 0; display: block; z-index: 9999;
}
#trigger { width: 40px; height: 40px; display: block; position: absolute; top: 22px; right: 34px; z-index: 999;
}
.nav-bars #svg-menu { width: 250px; height: 200px; position: absolute; top: 0; right: 0;
}
ul.menu { position: absolute; list-style: none; width: 100px; float: right; height: 100px; top: 20px; right: 20px;
}
.menu li a { position:absolute; top:20px; right:34px; display:block; font-family: "Droid Sans", sans-serif; font-weight: 700; cursor: pointer; z-index: 999; display: block; width: 40px; height:40px; line-height: 20px; text-decoration: none; text-align: center; color: lightgrey; letter-spacing: 8px; -webkit-transition: all 300ms cubic-bezier(0.87, 0.21, 0.11, 0.78); transition: all 300ms cubic-bezier(0.87, 0.21, 0.11, 0.78); font-size: 12px; pointer-events: none;
}
.menu li { z-index: 2; position: fixed; height: 30px; margin-top: -14px; margin-right: -10px; -moz-transition: all 150ms cubic-bezier(0.6, 0.01, 0.25, 1); -o-transition: all 150ms cubic-bezier(0.6, 0.01, 0.25, 1); -webkit-transition: all 150ms cubic-bezier(0.6, 0.01, 0.25, 1); transition: all 150ms cubic-bezier(0.6, 0.01, 0.25, 1); -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0);
}
.menu li.show { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.menu li:nth-child(1) { width: 120px; top: 40px; right: 100px;
}
.menu li:nth-child(3) { width: 100px; top: 120px; right: 64px;
}
.menu li:nth-child(2) { width: 140px; top: 80px; right: 82px;
}

Animating Hamburger menu - Script Codes JS Codes

$(document).ready(function() { var sMenu = Snap("#svg-menu"); var bar1 = sMenu.rect(180, 34, 26, 3); var bar2 = sMenu.rect(180, 40, 26, 3); var bar3 = sMenu.rect(180, 46, 26, 3); var openMenu = $("#trigger"); var wrapper = $(".container"); var menuItem = $(".menu li "); var bars = sMenu.group(bar1, bar2, bar3); bars.attr({ fill: "#000" }); mina.easeInOutCirc = function(n) { if ((n *= 2) < 1) return -0.5 * (Math.sqrt(1 - n * n) - 1); return 0.5 * (Math.sqrt(1 - (n -= 2) * n) + 1); }; var easing = mina.easeInOutCirc; menuActive(); function menuActive() { openMenu.on("click", function(e) { e.preventDefault(); menuItem.addClass("show"); setTimeout(function() { bar1.animate({ width: 120, height: 30, x: 60, y: 40 }, 200, easing); }, 300); setTimeout(function() { bar2.animate({ width: 140, height: 30, x: 80, y: 80 }, 200, easing); }, 200); setTimeout(function() { bar3.animate({ width: 100, height: 30, x: 100, y: 120 }, 200, easing); }, 100); $("body").on("click", function(e2) { e2.preventDefault(); if (e.target != e2.target && menuItem.hasClass("show")) menuItem.removeClass("show"); bar1.animate({ width: 26, height: 3, x: 180, y: 34 }, 300, easing); bar2.animate({ width: 26, height: 3, x: 180, y: 40 }, 300, easing); bar3.animate({ width: 26, height: 3, x: 180, y: 46 }, 300, easing); }); }); }
});
Animating Hamburger menu - Script Codes
Animating Hamburger menu - Script Codes
Home Page Home
Developer Kacper Bawol
Username Casperovic
Uploaded September 03, 2022
Rating 3
Size 2,898 Kb
Views 34,408
Do you need developer help for Animating Hamburger 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!

Kacper Bawol (Casperovic) Script Codes
Name
Scroll using CSS
A Pen by Kacper Bawol
Webgl experiment with shaders
Hover effect
Hover effects
Svg text explosion
Loading animation
Svg currency block
Create amazing blog posts 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!