Animated Menu Circles
How do I make an animated menu circles?
When you click on the menu, three menu items pop out of it.. What is a animated menu circles? How do you make a animated menu circles? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.
Animated Menu Circles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Menu Circles</title> <meta name='viewport' content='width=device-width'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-button"> <img class="icon" src="https://goo.gl/wuRPDb"> <div id="1" class="mini"> <img class="icon" src="https://goo.gl/m1V4Xv"> </div> <div id="2" class="mini"> <img class="icon" src="https://goo.gl/bXmZFW"> </div> <div id="3" class="mini"> <img class="icon" src="https://goo.gl/ruOLiC"> </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>
Animated Menu Circles - Script Codes CSS Codes
* { margin: 0; padding: 0; box-sizing: border-box;
}
.menu-button { float: right; background: #202020; width: 5em; height: 5em; border-radius: 50%; margin: 1em; cursor: pointer;
}
.icon { width: 100%; height: 100%; padding: 25%;
}
.mini { position: absolute; top: 3em; right: 3em; width: 1em; height: 1em; border-radius: 50%; background: #202020; z-index: -1;
}
.shrink-menu { -webkit-animation: shrink-menu .5s 1; animation: shrink-menu .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes shrink-menu { 0% { width: 5em; height: 5em; margin: 1em; } 100% { width: 4em; height: 4em; margin: .5em; }
}
@keyframes shrink-menu { 0% { width: 5em; height: 5em; margin: 1em; } 100% { width: 4em; height: 4em; margin: .5em; }
}
.grow-menu { -webkit-animation: grow-menu .5s 1; animation: grow-menu .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes grow-menu { 0% { width: 4em; height: 4em; margin: .5em; } 100% { width: 5em; height: 5em; margin: 1em; }
}
@keyframes grow-menu { 0% { width: 4em; height: 4em; margin: .5em; } 100% { width: 5em; height: 5em; margin: 1em; }
}
.left { -webkit-animation: left .5s 1; animation: left .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.diag { -webkit-animation: diag .5s 1; animation: diag .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.down { -webkit-animation: down .5s 1; animation: down .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes left { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 1.5em; right: 5em; width: 2em; height: 2em; }
}
@keyframes left { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 1.5em; right: 5em; width: 2em; height: 2em; }
}
@-webkit-keyframes diag { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 4em; right: 4em; width: 2em; height: 2em; }
}
@keyframes diag { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 4em; right: 4em; width: 2em; height: 2em; }
}
@-webkit-keyframes down { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 5em; right: 1.5em; width: 2em; height: 2em; }
}
@keyframes down { 0% { top: 3em; right: 3em; width: 1em; height: 1em; } 100% { top: 5em; right: 1.5em; width: 2em; height: 2em; }
}
.revLeft { -webkit-animation: revLeft .5s 1; animation: revLeft .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.revDiag { -webkit-animation: revDiag .5s 1; animation: revDiag .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.revDown { -webkit-animation: revDown .5s 1; animation: revDown .5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes revLeft { 0% { top: 1.5em; right: 5em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
@keyframes revLeft { 0% { top: 1.5em; right: 5em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
@-webkit-keyframes revDiag { 0% { top: 4em; right: 4em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
@keyframes revDiag { 0% { top: 4em; right: 4em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
@-webkit-keyframes revDown { 0% { top: 5em; right: 1.5em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
@keyframes revDown { 0% { top: 5em; right: 1.5em; width: 2em; height: 2em; } 100% { top: 3em; right: 3em; width: 1em; height: 1em; }
}
Animated Menu Circles - Script Codes JS Codes
$menuOpen = false;
$('.menu-button').click( function() { if( $menuOpen ) { if( $('.menu-button').hasClass('shrink-menu') ) { $('.menu-button').removeClass('shrink-menu'); $('#1').removeClass('left'); $('#2').removeClass('diag'); $('#3').removeClass('down'); } $('.menu-button').addClass('grow-menu'); $('#1').addClass('revLeft'); $('#2').addClass('revDiag'); $('#3').addClass('revDown'); $menuOpen = false; } else { if( $('.menu-button').hasClass('grow-menu') ) { $('.menu-button').removeClass('grow-menu'); $('#1').removeClass('revLeft'); $('#2').removeClass('revDiag'); $('#3').removeClass('revDown'); } $('.menu-button').addClass('shrink-menu'); $('#1').addClass('left'); $('#2').addClass('diag'); $('#3').addClass('down'); $menuOpen = true; }
});
Developer | Charlie Volpe |
Username | charlie-volpe |
Uploaded | November 08, 2022 |
Rating | 4 |
Size | 2,410 Kb |
Views | 26,312 |
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 |
Full Site Redesign | 4,238 Kb |
IPhone 5 CSS Template | 2,626 Kb |
Draggable Window | 2,717 Kb |
Podshare | 1,977 Kb |
Layout Resolutions | 1,860 Kb |
Modal Window Test Animations | 2,971 Kb |
Responsive Flat Sublime Text Visualization | 2,734 Kb |
IPad CSS Template | 2,557 Kb |
Switch with Indicator Light | 2,463 Kb |
Draggable Node Based VPL Test | 3,187 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 |
React Template | Isac | 1,241 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Improve | Gavra | 1,652 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
GsuiPopup | Mr21 | 2,641 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Layout 11 | Altynai | 1,690 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!