A Bouncy Menu Toggle
How do I make an a bouncy menu toggle?
What is a a bouncy menu toggle? How do you make a a bouncy menu toggle? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.
A Bouncy Menu Toggle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Bouncy Menu Toggle</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://weloveiconfonts.com/api/?family=typicons);
body { background: radial-gradient(circle at 50% 95%, #aaaacc, #ddddff); margin: 0;
}
.iphone { position: relative; width: 400px; height: 796.64px; margin: 1em auto; background-image: url("https://s.cdpn.io/15065/iphone5_2.png"); background-size: 100%;
}
.screen { position: absolute; overflow: hidden; top: 14.7%; right: 9.7%; bottom: 13.8%; left: 9.7%; background: #2980b9;
}
input { position: absolute; left: -9999px;
}
.scale { position: relative; margin: -1.75em auto; width: 3.5em; height: 3.5em; top: 50%; font-size: 3em;
}
.thing { display: block; position: absolute; z-index: 10; left: 0; bottom: 0; cursor: pointer; width: 2em; height: 2em; border: 0.75em solid transparent; transition: 75ms;
}
.thing:active { transform: scale(0.85);
}
.thing::before,
.thing::after { content: ''; position: absolute; top: 0; left: 0; border-radius: 0.4em; background: #ecf0f1;
}
.thing::before { width: 75%; height: 12.5%; margin-top: 43.75%; left: 12.5%; transform: scaleX(1.22); transition: width 150ms 75ms ease-in-out, left 150ms 75ms ease-in-out, transform 200ms 225ms ease-in;
}
.thing::after { width: 12.5%; height: 125%; top: -12.5%; margin-left: 43.75%; transform: scaleY(0.78); transition: height 175ms ease-in-out, top 175ms ease-in-out, transform 200ms 175ms ease-in;
}
input:checked + .thing::before { width: 125%; left: -12.5%; transform: scaleX(0.78); transition: width 175ms 0ms ease-in-out, left 175ms 0ms ease-in-out, transform 200ms 175ms ease-in;
}
input:checked + .thing::after { top: 50%; height: 0; transform: scaleY(1); transition: 150ms ease-in;
}
.menu { position: absolute; height: 0; width: 0; bottom: 0; left: 0; border-radius: 50% 50% 50% 0; background: #2c3e50; transition: border-radius 125ms ease-in, width 175ms 50ms, height 100ms 125ms, bottom 100ms 125ms;
}
input:checked ~ .menu { height: 5em; width: 100%; bottom: -1em; padding-left: 18%; border-radius: 0; transition: height 300ms ease-in-out, width 100ms 100ms linear, bottom 150ms 290ms ease-in, border-radius 100ms 190ms ease-out;
}
.menu > span { font-family: 'Typicons', sans-serif; display: block; float: left; width: 20%; font-size: 0em; opacity: 0; line-height: 4.8rem; text-align: center; color: #bdc3c7; cursor: pointer; transition: 50ms;
}
.menu > span:hover { color: #fff;
}
input:checked ~ .menu > span { font-size: 2em; opacity: 1;
}
@media (height: 300px) { .iphone { top: -520px; } .screen { left: 9.5%; bottom: 13.5%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="iphone"> <div class="screen"> <div class="scale"> <input type="checkbox" id="thing1" /> <label class="thing" for="thing1"></label> </div> <input type="checkbox" id="thing2" checked="" /> <label class="thing" for="thing2"></label> <div class="menu"> <span class="typicons-edit"></span> <span class="typicons-pin"></span> <span class="typicons-info"></span> <span class="typicons-delete"></span> </div> </div>
</div>
</body>
</html>
A Bouncy Menu Toggle - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=typicons);
body { background: radial-gradient(circle at 50% 95%, #aaaacc, #ddddff); margin: 0;
}
.iphone { position: relative; width: 400px; height: 796.64px; margin: 1em auto; background-image: url("https://s.cdpn.io/15065/iphone5_2.png"); background-size: 100%;
}
.screen { position: absolute; overflow: hidden; top: 14.7%; right: 9.7%; bottom: 13.8%; left: 9.7%; background: #2980b9;
}
input { position: absolute; left: -9999px;
}
.scale { position: relative; margin: -1.75em auto; width: 3.5em; height: 3.5em; top: 50%; font-size: 3em;
}
.thing { display: block; position: absolute; z-index: 10; left: 0; bottom: 0; cursor: pointer; width: 2em; height: 2em; border: 0.75em solid transparent; transition: 75ms;
}
.thing:active { transform: scale(0.85);
}
.thing::before,
.thing::after { content: ''; position: absolute; top: 0; left: 0; border-radius: 0.4em; background: #ecf0f1;
}
.thing::before { width: 75%; height: 12.5%; margin-top: 43.75%; left: 12.5%; transform: scaleX(1.22); transition: width 150ms 75ms ease-in-out, left 150ms 75ms ease-in-out, transform 200ms 225ms ease-in;
}
.thing::after { width: 12.5%; height: 125%; top: -12.5%; margin-left: 43.75%; transform: scaleY(0.78); transition: height 175ms ease-in-out, top 175ms ease-in-out, transform 200ms 175ms ease-in;
}
input:checked + .thing::before { width: 125%; left: -12.5%; transform: scaleX(0.78); transition: width 175ms 0ms ease-in-out, left 175ms 0ms ease-in-out, transform 200ms 175ms ease-in;
}
input:checked + .thing::after { top: 50%; height: 0; transform: scaleY(1); transition: 150ms ease-in;
}
.menu { position: absolute; height: 0; width: 0; bottom: 0; left: 0; border-radius: 50% 50% 50% 0; background: #2c3e50; transition: border-radius 125ms ease-in, width 175ms 50ms, height 100ms 125ms, bottom 100ms 125ms;
}
input:checked ~ .menu { height: 5em; width: 100%; bottom: -1em; padding-left: 18%; border-radius: 0; transition: height 300ms ease-in-out, width 100ms 100ms linear, bottom 150ms 290ms ease-in, border-radius 100ms 190ms ease-out;
}
.menu > span { font-family: 'Typicons', sans-serif; display: block; float: left; width: 20%; font-size: 0em; opacity: 0; line-height: 4.8rem; text-align: center; color: #bdc3c7; cursor: pointer; transition: 50ms;
}
.menu > span:hover { color: #fff;
}
input:checked ~ .menu > span { font-size: 2em; opacity: 1;
}
@media (height: 300px) { .iphone { top: -520px; } .screen { left: 9.5%; bottom: 13.5%; }
}

Developer | Billy Crist |
Username | billyysea |
Uploaded | October 04, 2022 |
Rating | 3 |
Size | 4,563 Kb |
Views | 24,276 |
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 |
Re-invented CSS Drop-down Menu | 2,757 Kb |
SuprLiTE CSS Arrows | 3,691 Kb |
A Music Player | 6,174 Kb |
Camera | 2,136 Kb |
Mobile Twitter Log-in Design | 3,177 Kb |
Full Page Vertical Hover Sliders | 2,418 Kb |
A Perfect Minimal iPhone Template | 2,322 Kb |
Interactive Business Card - OG | 3,334 Kb |
Random Swim Slider | 2,345 Kb |
A Simple, Fashionable, Loader | 1,661 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 |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Rotating Preloader with Anime.js | Tamashi | 2,450 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!