Toggle Hamburger Menu
How do I make an toggle hamburger menu?
CSS3 transform hamburger menu. What is a toggle hamburger menu? How do you make a toggle hamburger menu? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.
Toggle Hamburger Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Hamburger Menu</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="kruis"> <li></li> <li></li> <li></li> <li></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Toggle Hamburger Menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body { background-color: #c9c9c9; height: 100%; width: 100%; font-family: "Open Sans"; font-weight: 700;
}
#kruis { width: 100px; margin: 150px; padding: 0; position: relative;
}
#kruis:after { content: 'CLOSE'; position: absolute; top: -12px; left: 150px; font-size: 4.4em; opacity: 0; color: #333; transition: all 0.35s; -webkit-transition-delay: 0.35s; transition-delay: 0.35s;
}
#kruis.active:after { left: 100px; opacity: 1; transition: all 0.35s; -webkit-transition-delay: 0.35s; transition-delay: 0.35s;
}
#kruis li { list-style: none; width: 100px; height: 10px; margin: 10px 0; padding: 0; background-color: #333; position: relative; -webkit-transition: all 0.35s; transition: all 0.35s;
}
#kruis li:nth-child(2) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; height: 5px; margin-bottom: 0;
}
#kruis li:nth-child(3) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; height: 5px; margin-top: 0;
}
#kruis li.active:first-child { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; -webkit-transform: translateY(20px) translateX(10px) rotate(-45deg); -webkit-transform-origin: center center; transform: translateY(20px) translateX(10px) rotate(-45deg); transform-origin: center center; width: 80%;
}
#kruis li.active:nth-child(2) { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transform-origin: center center; transform: translateY(-20px); transform-origin: center center;
}
#kruis li.active:nth-child(3) { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(20px); -webkit-transform-origin: center center; transform: translateY(20px); transform-origin: center center;
}
#kruis li.active:last-child { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; -webkit-transform: translateY(-20px) translateX(10px) rotate(45deg); -webkit-transform-origin: center center; transform: translateY(-20px) translateX(10px) rotate(45deg); transform-origin: center center; width: 80%;
}
Toggle Hamburger Menu - Script Codes JS Codes
$('#kruis').on('click', function(){ $('li').toggleClass('active'); $(this).toggleClass('active');
});
Developer | Jimmy Van Der Sleen |
Username | sjimster |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,892 Kb |
Views | 6,072 |
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!
Name | Size |
Glow menu | 2,460 Kb |
Custom GoogleMaps | 2,357 Kb |
SoundCloud API user | 4,556 Kb |
SVG Handwriting test | 3,148 Kb |
SCSS BEM Tabs system | 3,252 Kb |
Fancy input fields | 3,537 Kb |
Inline Title Editor | 3,584 Kb |
CountingLikes | 2,654 Kb |
Flexbox vertical slide menu | 2,995 Kb |
3D picture carousel css | 3,065 Kb |
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!
Name | Username | Size |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Lecture 1 | Law | 0 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!