Kris Kross Hamburger
How do I make an kris kross hamburger?
Snippet for an animated menu hamburger. What is a kris kross hamburger? How do you make a kris kross hamburger? This script and codes were developed by Peter Hrynkow on 14 September 2022, Wednesday.
Kris Kross Hamburger - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kris Kross Hamburger</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-toggle the-menu-toggle" id="js_menuToggle"> <div class="menu-icon"></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>
Kris Kross Hamburger - Script Codes CSS Codes
.menu-toggle { cursor: pointer;
}
.the-menu-toggle { margin-top: 4em;
}
.menu-icon { position: relative; width: 30px; height: 20px; margin: 0 auto; display: block; background: #666;
}
.menu-icon:before,
.menu-icon:after { position: absolute; display: block; content: ""; top: 4px; width: 100%; height: 4px; background: #fff; display: block; -moz-transition: -moz-transform 0.125s ease-out; -o-transition: -o-transform 0.125s ease-out; -webkit-transition: -webkit-transform 0.125s ease-out; transition: transform 0.125s ease-out; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0);
}
.menu-icon:before { top: 12px;
}
.menu-toggle-expanded .menu-icon { background: none;
}
.menu-toggle-expanded .menu-icon:before,
.menu-toggle-expanded .menu-icon:after { top: 50%; margin-top: -2px; background: #666;
}
.menu-toggle-expanded .menu-icon:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.menu-toggle-expanded .menu-icon:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
Kris Kross Hamburger - Script Codes JS Codes
$('#js_menuToggle').on('click', function () { $(this).toggleClass('menu-toggle-expanded');
});
Developer | Peter Hrynkow |
Username | peterhry |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 2,517 Kb |
Views | 20,240 |
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 |
A Pen by Peter Hrynkow | 2,125 Kb |
Holographic Projection | 7,177 Kb |
Dot Ripple CSS | 9,856 Kb |
T-Shape Visualization | 3,883 Kb |
CSS Starbursts | 2,605 Kb |
Cross-browser vertical centering without Javascript and almost no CSS. | 1,800 Kb |
CSS Animation seeking with JavaScript | 3,053 Kb |
Curved type with SVG | 2,922 Kb |
3D Message Flipper | 2,651 Kb |
CircleType | 3,535 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 |
Video mute | Leon9208 | 2,131 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Layout 11 | Altynai | 1,690 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Add This API | ThatGuySam | 2,848 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Tab Menus | Zephyr | 3,180 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!