Animitating Hamburgers

Developer
Yoann Nouveau
Size
3,857 Kb
Views
28,336
  1. Animitating Hamburgers Previews
  2. Animitating Hamburgers HTML Codes
  3. Animitating Hamburgers CSS Codes
  4. Animitating Hamburgers JS Codes

How do I make an animitating hamburgers?

Various animation effects for hamburger menus. What is a animitating hamburgers? How do you make a animitating hamburgers? This script and codes were developed by Yoann Nouveau on 08 September 2022, Thursday.

Animitating Hamburgers Previews
IQ Test

Animitating Hamburgers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animitating Hamburgers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap"> <h1 id="titre">Animating Hamburgers</h1> <section id="menu1"> <h2>Cross Animation:</h2> <div class="menu-icon menu-icon-cross"> <span></span> <svg x="0" y="0" width="54px" height="54px" viewbox="0 0 54 54"> <circle cx="27" cy="27" r="26"></circle> </svg> </div> <h2>Path Animation:</h2> <div class="menu-icon menu-icon-path"> <span></span> <svg viewbox="0 0 54 54"> <path d="M16.500,27.000 C16.500,27.000 24.939,27.000 38.500,27.000 C52.061,27.000 49.945,15.648 46.510,11.367 C41.928,5.656 34.891,2.000 27.000,2.000 C13.193,2.000 2.000,13.193 2.000,27.000 C2.000,40.807 13.193,52.000 27.000,52.000 C40.807,52.000 52.000,40.807 52.000,27.000 C52.000,13.000 40.837,2.000 27.000,2.000 "></path> </svg> </div> <h2>Arrow Animation:</h2> <div class="menu-icon menu-icon-arrow"> <span></span> <svg x="0" y="0" width="54px" height="54px" viewbox="0 0 54 54"> <circle cx="27" cy="27" r="26"></circle> </svg> </div> </section>
</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>

Animitating Hamburgers - Script Codes CSS Codes

body { background-color: #15B493; color: white;
}
#wrap { width: 100%; padding: 4%;
}
h1 { padding: 10px; border-bottom: 2px solid #fff; padding-bottom: 20px;
}
h2 { text-decoration: underline;
}
h1, h2 { text-align: center; font-family: sans-serif;
}
.menu-icon { width: 54px; height: 54px; margin: auto; position: relative; border-radius: 50%;
}
.menu-icon span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 22px; height: 2px; background-color: #fff;
}
.menu-icon span:before, .menu-icon span:after { content: ""; background-color: #fff; width: 22px; height: 2px; position: absolute; top: 0; left: 0; transform: translateY(-6px); transition: transform 0.5s;
}
.menu-icon span:after { transform: translateY(6px);
}
.menu-icon:hover span:before { transform: translateY(-8px);
}
.menu-icon:hover span:after { transform: translateY(8px);
}
.menu-icon-cross { background-color: #052B23; transition: transform 0.5s;
}
.menu-icon-cross span::before, .menu-icon-cross span::after { transform-origin: 50% 50%;
}
.menu-icon-cross span { transition: background 0.5s, transform 0.5s;
}
.menu-icon-cross svg { fill: transparent; stroke-width: 2px; stroke: #fff; stroke-dashArray: 165; stroke-dashOffset: 165; transition: stroke-dashOffset 1s, fill 0.5s;
}
.menu-icon-cross.isOpen { transform: rotate(180deg);
}
.menu-icon-cross.isOpen span { background: transparent;
}
.menu-icon-cross.isOpen span:before { transform: translateY(0) rotate(45deg);
}
.menu-icon-cross.isOpen span:after { transform: translateY(0) rotate(-45deg);
}
.menu-icon-cross.isOpen svg { stroke-dashOffset: 0;
}
.menu-icon-cross.isOpen:hover svg { fill: rgba(255, 255, 255, 0.1);
}
.menu-icon-path span { background-color: #fff; transition: background-color 0.5s steps(1, end);
}
.menu-icon-path svg { fill: #052B23; stroke-width: 2px; stroke: transparent; stroke-dashArray: 22 230; transition: stroke-dashArray 0.5s, stroke-dashOffset 0.5s, transform 0.5s, stroke 0.5s steps(1, end);
}
.menu-icon-path.isOpen span { background-color: transparent; transition: background-color 0.5s steps(1, start);
}
.menu-icon-path.isOpen svg { stroke: #fff; stroke-dashOffset: -65; stroke-dashArray: 160; transition: stroke-dashArray 1s, stroke-dashOffset 0.5s, transform 0.5s, stroke 0.5s steps(1, start), fill 0.5s;
}
.menu-icon-path.isOpen span:before { transform: translateY(0) rotate(45deg);
}
.menu-icon-path.isOpen span:after { transform: translateY(0) rotate(-45deg);
}
.menu-icon-path.isOpen:hover svg { fill: #1D3F38;
}
.menu-icon-arrow { background-color: #052B23; transition: transform 0.5s;
}
.menu-icon-arrow span, .menu-icon-arrow span:before, .menu-icon-arrow span:after { transition: background 0.5s, transform 0.5s, width 0.5s; transform-origin: 100% 50%;
}
.menu-icon-arrow svg { fill: transparent; stroke-width: 2px; stroke: #fff; stroke-dashArray: 165; stroke-dashOffset: 165; transition: stroke-dashOffset 1s ease, fill 0.5s;
}
.menu-icon-arrow.isOpen { transform: rotate(180deg);
}
.menu-icon-arrow.isOpen span:before { transform: translateY(0) rotate(45deg);
}
.menu-icon-arrow.isOpen span:after { transform: translateY(0) rotate(-45deg);
}
.menu-icon-arrow.isOpen span:before, .menu-icon-arrow.isOpen span:after { width: 50%; right: 0; left: auto;
}
.menu-icon-arrow.isOpen svg { stroke-dashOffset: 0;
}
.menu-icon-arrow.isOpen:hover svg { fill: rgba(255, 255, 255, 0.1);
}

Animitating Hamburgers - Script Codes JS Codes

$(document).ready(function(){ $('.menu-icon').click(function(e){ e.preventDefault(); //Creer un "toggle" pour notre élément. $(this).toggleClass('isOpen'); });
});
Animitating Hamburgers - Script Codes
Animitating Hamburgers - Script Codes
Home Page Home
Developer Yoann Nouveau
Username YoannN2
Uploaded September 08, 2022
Rating 3.5
Size 3,857 Kb
Views 28,336
Do you need developer help for Animitating Hamburgers?

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!

Yoann Nouveau (YoannN2) Script Codes
Name
Off Menu Canvas Experiments
Material Design Ripple effect on buttons
Test
WIP - Toggling password JS JQUERY ANGULAR VUEJS
Checkbox jQuery
Some buttons
Tooltips
Project Euler 1
PongJS
A Pen by Yoann Nouveau
Create amazing web 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!