Blowout Menu
How do I make an blowout menu?
What is a blowout menu? How do you make a blowout menu? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
Blowout Menu Previews
Blowout Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blowout Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, height=device-height, minimum-scale=0.8, maximum-scale=0.8' name='viewport'>
<div class='header'>99% Pure CSS "Blowout" Menu</div>
<div class='container'> <div class='centered'> <div class='one-3'> <div class='wheel wheel-5 closed'> <div class='wheel-item'> <span>1</span> </div> <div class='wheel-item'> <span>2</span> </div> <div class='wheel-item'> <span>3</span> </div> <div class='wheel-item'> <span>4</span> </div> <div class='wheel-item'> <span>5</span> </div> <div class='wheel-main'> <span>5</span> </div> </div> </div> <div class='one-3'> <div class='wheel wheel-4'> <div class='wheel-item'> <span>1</span> </div> <div class='wheel-item'> <span>2</span> </div> <div class='wheel-item'> <span>3</span> </div> <div class='wheel-item'> <span>4</span> </div> <div class='wheel-main'> <span>4</span> </div> </div> </div> <div class='one-3'> <div class='wheel wheel-3 closed'> <div class='wheel-item'> <span>1</span> </div> <div class='wheel-item'> <span>2</span> </div> <div class='wheel-item'> <span>3</span> </div> <div class='wheel-main'> <span>3</span> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Blowout Menu - Script Codes CSS Codes
.wheel-1 > .wheel-item:nth-child(1) { left: -0.04rem; top: -5rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-1.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0);
}
.wheel-2 > .wheel-item:nth-child(1) { left: -2.54rem; top: -4.33013rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-2.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0);
}
.wheel-2 > .wheel-item:nth-child(2) { left: 2.46rem; top: -4.33013rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-2.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(1) { left: -3.57553rem; top: -3.53553rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-3.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); transform: translate3d(3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(2) { left: -0.04rem; top: -5rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-3.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0);
}
.wheel-3 > .wheel-item:nth-child(3) { left: 3.49553rem; top: -3.53553rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-3.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(-3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-3.53553rem, 3.53553rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(1) { left: -4.08508rem; top: -2.93893rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-4.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); transform: translate3d(4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(2) { left: -1.58508rem; top: -4.75528rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-4.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); transform: translate3d(1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(3) { left: 1.50508rem; top: -4.75528rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-4.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(-1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-1.54508rem, 4.75528rem, 0) translate3d(50%, 50%, 0);
}
.wheel-4 > .wheel-item:nth-child(4) { left: 4.00508rem; top: -2.93893rem; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s;
}
.wheel-4.closed .wheel-item:nth-child(4) { -webkit-transform: translate3d(-4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-4.04508rem, 2.93893rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(1) { left: -4.37013rem; top: -2.5rem; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
.wheel-5.closed .wheel-item:nth-child(1) { -webkit-transform: translate3d(4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); transform: translate3d(4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(2) { left: -2.54rem; top: -4.33013rem; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -ms-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s;
}
.wheel-5.closed .wheel-item:nth-child(2) { -webkit-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); transform: translate3d(2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(3) { left: -0.04rem; top: -5rem; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;
}
.wheel-5.closed .wheel-item:nth-child(3) { -webkit-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0); transform: translate3d(0rem, 5rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(4) { left: 2.46rem; top: -4.33013rem; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s;
}
.wheel-5.closed .wheel-item:nth-child(4) { -webkit-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-2.5rem, 4.33013rem, 0) translate3d(50%, 50%, 0);
}
.wheel-5 > .wheel-item:nth-child(5) { left: 4.29013rem; top: -2.5rem; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;
}
.wheel-5.closed .wheel-item:nth-child(5) { -webkit-transform: translate3d(-4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -moz-transform: translate3d(-4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -ms-transform: translate3d(-4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); -o-transform: translate3d(-4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0); transform: translate3d(-4.33013rem, 2.5rem, 0) translate3d(50%, 50%, 0);
}
.wheel { position: relative; display: inline-block;
}
.wheel .wheel-main, .wheel .wheel-item { -webkit-transition: all 0.5s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.5s ease-out; -moz-transition: all 0.5s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.5s ease-out; -ms-transition: all 0.5s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.5s ease-out; -o-transition: all 0.5s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.5s ease-out; transition: all 0.5s cubic-bezier(0.79, 0.085, 0.32, 1.38), opacity 0.5s ease-out;
}
.wheel .wheel-item { position: absolute; display: inline-block; -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0); -ms-transform: translate3d(50%, 0, 0); -o-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0);
}
.wheel.closed .wheel-item { opacity: 0;
}
.wheel-main, .wheel-item { color: #CCC; border: solid 2px #CCC; width: 4rem; height: 4rem; line-height: 4rem; border-radius: 50%; cursor: pointer; opacity: 0.3333;
}
.wheel-main:hover, .wheel-item:hover { opacity: 1;
}
.wheel-main.wheel-item, .wheel-item.wheel-item { width: 2rem; height: 2rem; line-height: 2rem;
}
/***************************************************************************************** * Nothing to see here... *****************************************************************************************/
.container { white-space: nowrap;
}
.container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.container > .centered { width: 100%; display: inline-block; vertical-align: middle; white-space: normal;
}
.container { position: absolute; box-sizing: border-box; width: 100%; height: 100%; padding: 0; margin: 0; text-align: center;
}
.container .centered { box-sizing: border-box; width: 20rem; text-align: center; white-space: nowrap;
}
.one-3 { display: inline-block; width: 33.33333%; text-align: center;
}
.header { position: absolute; display: inline-block; width: 100%; text-align: center; padding-top: 2rem; font-size: 1.5rem; font-weight: 100;
}
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: #333; font-weight: 800; color: #CCC; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
Blowout Menu - Script Codes JS Codes
$('.wheel-main').on('click', function(){ $('.wheel:not(.closed)') .not($(this).closest('.wheel')) .addClass('closed'); $(this).closest('.wheel').toggleClass('closed');
});
//For Responsiveness
FastClick.attach(document.body);
//For initial animation
setTimeout(function(){ $('.wheel-3 .wheel-main').click();
},500);
setTimeout(function(){ $('.wheel-4 .wheel-main').click();
},1000);
setTimeout(function(){ $('.wheel-5 .wheel-main').click();
},1500);
| Developer | Aaron Levine |
| Username | Aldlevine |
| Uploaded | January 30, 2023 |
| Rating | 3 |
| Size | 4,712 Kb |
| Views | 4,048 |
Do you need developer help for Blowout Menu?
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!
Aaron Levine (Aldlevine) Script Codes
| Name | Size |
| Pure CSS Rating Scale | 2,706 Kb |
| Progress | 2,659 Kb |
| Flashy Rating Page | 4,375 Kb |
| Random Gradients - JS | 2,026 Kb |
| Faceful Cubes | 3,721 Kb |
| IOS-7 style slide-toggle | 4,131 Kb |
| CRT TV Page Load Animation | 2,498 Kb |
| Canvas Falloff Test | 2,989 Kb |
| Mobile App Design | 9,243 Kb |
| Card Mockup | 6,436 Kb |
Create amazing love letters with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
| CSS Tooltips | Darylldoyle | 2,599 Kb |
| Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
| Shopping cart | Andiio | 6,581 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Double box-shadow | Daubac402 | 1,436 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
Do you want hide your ip address?
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!