Bouncy Icon Select Menu

Developer
Yogev Ahuvia
Size
6,673 Kb
Views
24,288
  1. Bouncy Icon Select Menu Previews
  2. Bouncy Icon Select Menu HTML Codes
  3. Bouncy Icon Select Menu CSS Codes
  4. Bouncy Icon Select Menu JS Codes

How do I make an bouncy icon select menu?

Icon selection menus that has a bouncy transition. The buttons are skin-able using an easy to use SASS mixin.. What is a bouncy icon select menu? How do you make a bouncy icon select menu? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Bouncy Icon Select Menu Previews
IQ Test

Bouncy Icon Select Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncy Icon Select Menu</title> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ .stack { position: relative; display: inline-block; margin: 0 15px; width: 70px; height: 70px;
}
.stack > .stack-item, .stack > .stack-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; cursor: pointer; font-size: 20px; line-height: 70px;
}
.stack > .stack-icon { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 2px 0px rgba(255, 255, 255, 0.75); z-index: 10; transition: all 100ms;
}
.stack > .stack-item.selected { z-index: 100;
}
.stack:not(.open) > .stack-item { transform: translateY(0px) translateX(0px) !important;
}
.stack:not(.open) > .stack-item.selected { width: 40px; height: 40px; margin-left: 15px; margin-top: 15px; line-height: 40px;
}
.stack.open > .stack-icon, .stack:hover > .stack-icon { width: 100px; height: 100px; margin-left: -15px; margin-top: -15px; line-height: 100px;
}
.stack.open > .stack-item, .stack:hover > .stack-item { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 2px 0px white;
}
.stack.open > .stack-item:hover:after, .stack:hover > .stack-item:hover:after { content: attr(data-title); display: inline-block; position: absolute; background: rgba(0, 0, 0, 0.3); height: 24px; font-size: 16px; line-height: 24px; text-align: left; top: 50%; left: 100%; margin-top: -12px; margin-left: 10px; padding: 0 5px; border-radius: 5px;
}
.stack.skin-1 > .stack-icon { background: #FE4365; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-1 > .stack-item { color: #FE4365;
}
.stack.skin-1:not(.open) > .stack-item { background-color: #fdcdcc;
}
.stack.skin-1.open > .stack-item, .stack.skin-1:hover > .stack-item { background-color: #FC9D9A;
}
.stack.skin-1.open > .stack-item.selected, .stack.skin-1:hover > .stack-item.selected { color: #ddd; background-color: #FE4365; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-2 > .stack-icon { background: #008C9E; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-2 > .stack-item { color: #008C9E;
}
.stack.skin-2:not(.open) > .stack-item { background-color: #30e7ff;
}
.stack.skin-2.open > .stack-item, .stack.skin-2:hover > .stack-item { background-color: #00DFFC;
}
.stack.skin-2.open > .stack-item.selected, .stack.skin-2:hover > .stack-item.selected { color: #ddd; background-color: #008C9E; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-3 > .stack-icon { background: #8FBE00; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-3 > .stack-item { color: #8FBE00;
}
.stack.skin-3:not(.open) > .stack-item { background-color: #d3ed96;
}
.stack.skin-3.open > .stack-item, .stack.skin-3:hover > .stack-item { background-color: #C1E66A;
}
.stack.skin-3.open > .stack-item.selected, .stack.skin-3:hover > .stack-item.selected { color: #ddd; background-color: #8FBE00; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.container { position: absolute; width: 100%; top: 75px; text-align: center;
}
body { background-color: #444444; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF444444', endColorstr='#FF444444'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNjQ2NDk2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDQ0NDQ0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #444444), color-stop(50%, #646496), color-stop(100%, #444444)); background-image: -moz-linear-gradient(left, #444444 0%, #646496 50%, #444444 100%); background-image: -webkit-linear-gradient(left, #444444 0%, #646496 50%, #444444 100%); background-image: linear-gradient(to right, #444444 0%, #646496 50%, #444444 100%); font-family: 'Droid Sans', sans-serif; overflow-y: scroll; padding-top: 1px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <ul class="stack skin-1"> <li class="stack-icon"> <i class="icon-plus"></i> </li> <li class="stack-item" data-title="Camera"> <i class="icon-camera"></i> </li> <li class="stack-item" data-title="Phone"> <i class="icon-phone"></i> </li> <li class="stack-item" data-title="Music"> <i class="icon-music"></i> </li> </ul> <ul class="stack skin-2"> <li class="stack-icon"> <i class="icon-plus"></i> </li> <li class="stack-item" data-title="Poor"> <i class="icon-star-empty"></i> </li> <li class="stack-item" data-title="Moderate"> <i class="icon-star-half-full"></i> </li> <li class="stack-item" data-title="Great"> <i class="icon-star"></i> </li> </ul> <ul class="stack skin-3"> <li class="stack-icon"> <i class="icon-plus"></i> </li> <li class="stack-item" data-title="Map"> <i class="icon-map-marker"></i> </li> <li class="stack-item" data-title="Cloud"> <i class="icon-cloud"></i> </li> <li class="stack-item" data-title="Calendar"> <i class="icon-calendar"></i> </li> </ul>
</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>

Bouncy Icon Select Menu - Script Codes CSS Codes

.stack { position: relative; display: inline-block; margin: 0 15px; width: 70px; height: 70px;
}
.stack > .stack-item, .stack > .stack-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; cursor: pointer; font-size: 20px; line-height: 70px;
}
.stack > .stack-icon { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 2px 0px rgba(255, 255, 255, 0.75); z-index: 10; transition: all 100ms;
}
.stack > .stack-item.selected { z-index: 100;
}
.stack:not(.open) > .stack-item { transform: translateY(0px) translateX(0px) !important;
}
.stack:not(.open) > .stack-item.selected { width: 40px; height: 40px; margin-left: 15px; margin-top: 15px; line-height: 40px;
}
.stack.open > .stack-icon, .stack:hover > .stack-icon { width: 100px; height: 100px; margin-left: -15px; margin-top: -15px; line-height: 100px;
}
.stack.open > .stack-item, .stack:hover > .stack-item { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 2px 0px white;
}
.stack.open > .stack-item:hover:after, .stack:hover > .stack-item:hover:after { content: attr(data-title); display: inline-block; position: absolute; background: rgba(0, 0, 0, 0.3); height: 24px; font-size: 16px; line-height: 24px; text-align: left; top: 50%; left: 100%; margin-top: -12px; margin-left: 10px; padding: 0 5px; border-radius: 5px;
}
.stack.skin-1 > .stack-icon { background: #FE4365; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-1 > .stack-item { color: #FE4365;
}
.stack.skin-1:not(.open) > .stack-item { background-color: #fdcdcc;
}
.stack.skin-1.open > .stack-item, .stack.skin-1:hover > .stack-item { background-color: #FC9D9A;
}
.stack.skin-1.open > .stack-item.selected, .stack.skin-1:hover > .stack-item.selected { color: #ddd; background-color: #FE4365; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-2 > .stack-icon { background: #008C9E; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-2 > .stack-item { color: #008C9E;
}
.stack.skin-2:not(.open) > .stack-item { background-color: #30e7ff;
}
.stack.skin-2.open > .stack-item, .stack.skin-2:hover > .stack-item { background-color: #00DFFC;
}
.stack.skin-2.open > .stack-item.selected, .stack.skin-2:hover > .stack-item.selected { color: #ddd; background-color: #008C9E; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-3 > .stack-icon { background: #8FBE00; color: #ddd; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.stack.skin-3 > .stack-item { color: #8FBE00;
}
.stack.skin-3:not(.open) > .stack-item { background-color: #d3ed96;
}
.stack.skin-3.open > .stack-item, .stack.skin-3:hover > .stack-item { background-color: #C1E66A;
}
.stack.skin-3.open > .stack-item.selected, .stack.skin-3:hover > .stack-item.selected { color: #ddd; background-color: #8FBE00; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.container { position: absolute; width: 100%; top: 75px; text-align: center;
}
body { background-color: #444444; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF444444', endColorstr='#FF444444'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNjQ2NDk2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDQ0NDQ0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #444444), color-stop(50%, #646496), color-stop(100%, #444444)); background-image: -moz-linear-gradient(left, #444444 0%, #646496 50%, #444444 100%); background-image: -webkit-linear-gradient(left, #444444 0%, #646496 50%, #444444 100%); background-image: linear-gradient(to right, #444444 0%, #646496 50%, #444444 100%); font-family: 'Droid Sans', sans-serif; overflow-y: scroll; padding-top: 1px;
}

Bouncy Icon Select Menu - Script Codes JS Codes

// itemSize and magnification should match
// corresponding variables in SASS
var itemSize = 70;
var itemPadding = 5;
var magnification = 30;
var transitionSpeed = 200;
/* Bouncy Icon Select Menu © Yogev Ahuvia * ======================================= * Icon selection menus that has a bouncy * transition. The buttons are skinnable * using an easy to use SASS mixin. */
var stacks = [];
var stackItems = [];
$(document).ready(function() { // iterate through all stacks stacks = $('.stack'); for (var i = 0; i < stacks.length; i++) { var $stack = $(stacks[i]); // set .open on hover (timer to prevent premature close) $stack.hover(function() { clearTimeout($(this).data('timer')); $(this).addClass('open'); }, function() { var $elem = $(this); var timer = setTimeout(function(){ $elem.removeClass('open'); }, 200); $elem.data('timer', timer); }); // iterate through all stack-items in each stack stackItems[i] = $stack.find('.stack-item'); for (var j = 0; j < stackItems[i].length; j++) { var item = stackItems[i][j]; // handle stack-item selection $(item).on('click', function() { var $this = $(this); if ($this.hasClass('selected')) { // toggle off pre-selected item $this.removeClass('selected'); } else { // toggle off all items in stack var siblings = $this.parent().find('.stack-item'); for (var k = 0; k < siblings.length; k++) { $(siblings[k]).removeClass('selected'); } // toggle on selected item $this.addClass('selected'); } }); // prepare item transformation params var duration = ((j+1) * transitionSpeed) + (j*50); var translate = (magnification/2) + (j+1) * (itemSize + itemPadding); // prepare trasform and translate strings var transform = duration + 'ms cubic-bezier(.40,1,.72,1.85), background-color 500ms'; var translate = 'translateY('+translate+'px)'; // implement transition and transform on stack-item $(item).css('transition', '-webkit-transform '+transform); $(item).css('transition', '-moz-transform '+transform); $(item).css('transition', '-ms-transform '+transform); $(item).css('transition', '-o-transform '+transform); $(item).css('transition', 'transform '+transform); $(item).css('transform', translate); } }
});
Bouncy Icon Select Menu - Script Codes
Bouncy Icon Select Menu - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 4
Size 6,673 Kb
Views 24,288
Do you need developer help for Bouncy Icon Select 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!

Yogev Ahuvia (kindofone) Script Codes
Name
Real-Time Love Meter
Subtle Buttons
CSS Only In-Place Translation
Ball Bouncing On Text
Humble Progress
Tears Of Happiness
Reactive CSS Transitions
Thumbnail Animation Effects
Living Interfaces - Talk
CSS Filter Glass
Create amazing Facebook ads 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!