Animated Slide Hamburger Mobile Menu
How do I make an animated slide hamburger mobile menu?
A basic animated hamburger. The typical icon for mobile menus, but with an animated X that transforms from the hamburger itself. . What is a animated slide hamburger mobile menu? How do you make a animated slide hamburger mobile menu? This script and codes were developed by BJack on 07 October 2022, Friday.
Animated Slide Hamburger Mobile Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Slide Hamburger Mobile Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="trigger"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-2-1"></div> <div class="line-3"></div> </div>
<ul class="flags">
<li style="background-color: #F7941e;"></li>
<li style="background-color: #cd714b;"></li>
<li style="background-color: #56ca4e;"></li>
<li style="background-color: #F8e156;"></li>
<li style="background-color: #fc12e1;"></li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.jquery.com/ui/1.10.3/jquery-ui.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Slide Hamburger Mobile Menu - Script Codes CSS Codes
html{ background: #ddd;
}
li,ul{ margin: 0 auto; padding: 0;
}
.flags{ display: none; margin: 0 auto; float: left;
}
.trigger{ height: 30px; width: 30px; background-color: #0099cc; float: left; margin: 0 auto; padding: 10px; cursor: pointer;
}
.flags li{ margin: 0 auto; padding:0; height: 50px; width: 50px; list-style-type: none; float: left;
}
.flags li:hover{ box-shadow: inset 0px 0px 5px #000;
}
.line-1{ border-top: 5px solid #fff; width:30px; margin: 0px auto; padding-bottom: 3px; transition: all 0.4s; position: absolute; top: 23px;
}
.line-2{ border-top: 5px solid #fff; width:30px; margin: 0px auto; padding-bottom: 3px; transition: all 0.4s; position: absolute; top: 31px; left: 18px;
}
.line-2-1{ border-top: 5px solid #fff; width:30px; margin: 0px auto; padding-bottom: 3px; transition: all 0.4s; position: absolute; top: 31px; left: 18px;
}
.line-3{ border-top: 5px solid #fff; width:30px; margin: 0px auto; padding-bottom: 3px; transition: all 0.4s; position: absolute; top: 39px; left: 18px;
}
.line-on{ border-color: #ddd;
}
.line-1-x{ opacity:0; transition: all 0.4s;
}
.line-2-x{ -webkit-transform: rotate(45deg); transition: all 0.4s; top: 29px; left: 17px;
}
.line-2-1-x{ -webkit-transform: rotate(-45deg); transition: all 0.4s; top: 29px;
}
.line-3-x{ opacity:0; transition: all 0.4s;
}
Animated Slide Hamburger Mobile Menu - Script Codes JS Codes
$(document).ready(function(){ $('.trigger').click(function(){ $('.flags').toggle("slide", { direction: "left" }, 300); $('.line-1').toggleClass('line-1-x'); $('.line-2').toggleClass('line-2-x'); $('.line-2-1').toggleClass('line-2-1-x'); $('.line-3').toggleClass('line-3-x'); }); //End Click event handler
}); //End document.ready
Developer | BJack |
Username | BJack |
Uploaded | October 07, 2022 |
Rating | 4 |
Size | 2,247 Kb |
Views | 28,336 |
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 |
Flexbox menu | 3,293 Kb |
Coffee loader | 2,706 Kb |
Penmau5 | 3,811 Kb |
Weather Widget | 4,037 Kb |
StackOverflow solution | 2,114 Kb |
One Page Layout | 4,233 Kb |
Remembrance Day 2014. | 2,966 Kb |
Chat app mockup | 4,601 Kb |
CSS3 Circular Loading | 2,408 Kb |
Progress bar profile completion | 3,088 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 |
SVG Circle Progress | JMChristensen | 3,368 Kb |
Ball physics | Blackkbot | 3,874 Kb |
The Walking Raymarcher | Xorxor_hu | 7,934 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Sinclair Research Computers | MattCowley | 3,068 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!