snippet

CSS 3D Dropdown Menu by

Another beautifull responsive drop down menu, with fantastic down down effect, you use this Animated Responsive Drop Down Menu for your responsive website or mobile app


Tags: animated menu 3d dropdown menu multi menu responsive multi menu menu responsive

The MIT License (MIT)

Copyright (c) 2017

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Countries

CSS 3D Dropdown Menu

Lebanon
Beirout
Sidon
Tripoli
Zahle
Bekaa
South
Iheden
Baalbak
Achrafieh
Damour
United Arab Emirates
Dubai
Abu Dhabi
Sharjah
Al Ain
Ajman
Al Gharbia
Ras Al Khaimah
Fujairah
Dibba
Um Al Quwain
India
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chhattisgarh
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Toggle
html, body { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; background: #ffffff; background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 26%, #f5f5f5 59%, #f5f5f5 77%, #cecece 100%); background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%,#ffffff), color-stop(26%,#ffffff), color-stop(59%,#f5f5f5), color-stop(77%,#f5f5f5), color-stop(100%,#cecece)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%); background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%); font-family: 'Days One', sans-serif; overflow: hidden; padding: 0; margin: 0; height: 100%; } body:before { position: absolute; content: ''; opacity: 0.8; height: 100%; width: 100%; left: 0; top: 0; } a { -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -moz-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -ms-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -o-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); text-decoration: none; } .header { text-align: center; position: absolute; z-index: 1; color: #f78; width: 100%; top: 5%; } .header h1 { letter-spacing: -1px; text-shadow: -2px -1px 1px #fff, 1px 2px 2px rgba(0, 0, 0, 0.2); font-weight: 300; font-size: 36px; margin: 0; } .header h2 { text-transform: uppercase; font-weight: 300; font-size: 12px; color: rgba(158,241,231,0.7); margin: 0; } .demo:after { box-shadow: 0 1px 16px rgba(0,0,0,0.15); background: #1b1b1b; position: absolute; content: ''; height: 10px; width: 100%; top: 0; } /* List styles */ .list { -webkit-transform-style: preserve-3d; -moz-transform-stle: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; text-transform: uppercase; position: absolute; margin-left: -140px; top: 20%; } .list a { display: block; color: #fff; } .list a:hover { text-indent: 20px; } .list dt, .list dd { text-indent: 10px; line-height: 55px; background: #E0FBAC; margin: 0; height: 55px; width: 270px; color: #fff; } .list dt { /* Since we're hiding elements behind here, we need it in 3d */ -webkit-transform: translateZ(0.3px); -moz-transform: translateZ(0.3px); -ms-transform: translateZ(0.3px); -o-transform: translateZ(0.3px); transform: translateZ(0.3px); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); font-size: 15px; } .list dd { border-top: 1px dashed rgba(255,255,255,0.3); line-height: 35px; font-size: 11px; height: 35px; margin: 0; } /* UI */ .toggle { -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); box-shadow: 0 1px 4px rgba(0,0,0,0.15); border-radius: 3px; text-transform: uppercase; letter-spacing: -1px; line-height: 50px; margin-left: -70px; margin-top: -20px; background: #2b2b2b; text-align: center; font-size: 12px; position: absolute; z-index: 1; height: 50px; bottom: 10%; width: 140px; color: #fff; left: 50%; } .toggle:hover { background: #E42692; } /* Individual styles */ .India dt, .India dd, .India a { background: #73C8A9; } .lebanon dt, .lebanon dd, .lebanon a { background: #E32551; } .UAE dt, .UAE dd, .UAE a { background: #FFC219; } .India a:hover { background: #61c19e; } .lebanon a:hover { background: #d31b46; } .UAE a:hover { background: #ffbb00; } .lebanon { -webkit-transform: perspective(1200px) rotateY(40deg) !important; -moz-transform: perspective(1200px) rotateY(40deg) !important; -ms-transform: perspective(1200px) rotateY(40deg) !important; -o-transform: perspective(1200px) rotateY(40deg) !important; transform: perspective(1200px) rotateY(40deg) !important; -webkit-transform-origin: 110% 25%; -moz-transform-origin: 110% 25%; -ms-transform-origin: 110% 25%; -o-transform-origin: 110% 25%; transform-origin: 110% 25%; left: 20%; } .UAE { -webkit-transform: perspective(600px) translateZ(1px) !important; -moz-transform: perspective(600px) translateZ(1px) !important; -ms-transform: perspective(600px) translateZ(1px) !important; -o-transform: perspective(600px) translateZ(1px) !important; transform: perspective(600px) translateZ(1px) !important; left: 50%; } .India { -webkit-transform: perspective(1200px) rotateY(-40deg) !important; -moz-transform: perspective(1200px) rotateY(-40deg) !important; -ms-transform: perspective(1200px) rotateY(-40deg) !important; -o-transform: perspective(1200px) rotateY(-40deg) !important; transform: perspective(1200px) rotateY(-40deg) !important; -webkit-transform-origin: -10% 25%; -moz-transform-origin: -10% 25%; -ms-transform-origin: -10% 25%; -o-transform-origin: -10% 25%; transform-origin: -10% 25%; left: 80%; }(function($) { // Global initialisation flag var initialized = false; // For detecting browser prefix and capabilities var el = document.createElement( 'div' ); var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/; // Establish vendor prefix and CSS 3D support var vendor = (function() { for ( var p in el.style ) if( re.test(p) ) return p.match(re)[0]; })() || ''; var canRun = vendor + 'Perspective' in el.style; var prefix = '-' + vendor.toLowerCase() + '-'; var $this, $root, $base, $kids, $node, $item, $over, $back; var wait, anim, last; // Public API var api = { // Toggle open / closed toggle: function() { $this = $( this ); $this.Countries( $this.hasClass( 'open' ) ? 'close' : 'open' ); }, // Trigger the unfold animation open: function( speed, overlap, easing ) { // Cache DOM references $this = $(this); $root = $this.find( '.root' ); $kids = $this.find( '.node' ).not( $root ); // Establish values or fallbacks speed = utils.resolve( $this, 'speed', speed ); easing = utils.resolve( $this, 'easing', easing ); overlap = utils.resolve( $this, 'overlap', overlap ); $kids.each( function( index, el ) { // Establish settings for this iteration anim = 'unfold' + ( !index ? '-first' : '' ); last = index === $kids.length - 1; time = speed * ( 1 - overlap ); wait = index * time; // Cache DOM references $item = $( el ); $over = $item.find( '.over' ); // Element animation $item.css(utils.prefix({ 'transform': 'rotateX(180deg)', 'animation': anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards' })); // Shading animation happens when the next item starts if ( !last ) wait = ( index + 1 ) * time; // Shading animation $over.css(utils.prefix({ 'animation': 'unfold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards' })); }); // Add momentum to the container $root.css(utils.prefix({ 'animation': 'swing-out ' + ( $kids.length * time * 1.4 ) + 's ease-in-out 0s 1 normal forwards' })); $this.addClass( 'open' ); }, // Trigger the fold animation close: function( speed, overlap, easing ) { // Cache DOM references $this = $(this); $root = $this.find( '.root' ); $kids = $this.find( '.node' ).not( $root ); // Establish values or fallbacks speed = utils.resolve( $this, 'speed', speed ) * 0.66; easing = utils.resolve( $this, 'easing', easing ); overlap = utils.resolve( $this, 'overlap', overlap ); $kids.each( function( index, el ) { // Establish settings for this iteration anim = 'fold' + ( !index ? '-first' : '' ); last = index === 0; time = speed * ( 1 - overlap ); wait = ( $kids.length - index - 1 ) * time; // Cache DOM references $item = $( el ); $over = $item.find( '.over' ); // Element animation $item.css(utils.prefix({ 'transform': 'rotateX(0deg)', 'animation': anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards' })); // Adjust delay for shading if ( !last ) wait = ( ( $kids.length - index - 2 ) * time ) + ( speed * 0.35 ); // Shading animation $over.css(utils.prefix({ 'animation': 'fold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards' })); }); // Add momentum to the container $root.css(utils.prefix({ 'animation': 'swing-in ' + ( $kids.length * time * 1.0 ) + 's ease-in-out 0s 1 normal forwards' })); $this.removeClass( 'open' ); } }; // Utils var utils = { // Resolves argument values to defaults resolve: function( $el, key, val ) { return typeof val === 'undefined' ? $el.data( key ) : val; }, // Prefixes a hash of styles with the current vendor prefix: function( style ) { for ( var key in style ) { style[ prefix + key ] = style[ key ]; } return style; }, // Inserts rules into the document styles inject: function( rule ) { try { var style = document.createElement( 'style' ); style.innerHTML = rule; document.getElementsByTagName( 'head' )[0].appendChild( style ); } catch ( error ) {} } }; // Element templates var markup = { node: '', back: '', over: '' }; // Plugin definition $.fn.Countries = function( options ) { // Notify if 3D isn't available if ( !canRun ) { var message = 'Failed to detect CSS 3D support'; if( console && console.warn ) { // Print warning to the console console.warn( message ); // Trigger errors on elements this.each( function() { $( this ).trigger( 'error', message ); }); } return; } // Fires only once if ( !initialized ) { initialized = true; // Unfold utils.inject( '@' + prefix + 'keyframes unfold {' + '0% {' + prefix + 'transform: rotateX(180deg); }' + '50% {' + prefix + 'transform: rotateX(-30deg); }' + '100% {' + prefix + 'transform: rotateX(0deg); }' + '}'); // Unfold (first item) utils.inject( '@' + prefix + 'keyframes unfold-first {' + '0% {' + prefix + 'transform: rotateX(-90deg); }' + '50% {' + prefix + 'transform: rotateX(60deg); }' + '100% {' + prefix + 'transform: rotateX(0deg); }' + '}'); // Fold utils.inject( '@' + prefix + 'keyframes fold {' + '0% {' + prefix + 'transform: rotateX(0deg); }' + '100% {' + prefix + 'transform: rotateX(180deg); }' + '}'); // Fold (first item) utils.inject( '@' + prefix + 'keyframes fold-first {' + '0% {' + prefix + 'transform: rotateX(0deg); }' + '100% {' + prefix + 'transform: rotateX(-180deg); }' + '}'); // Swing out utils.inject( '@' + prefix + 'keyframes swing-out {' + '0% {' + prefix + 'transform: rotateX(0deg); }' + '30% {' + prefix + 'transform: rotateX(-30deg); }' + '60% {' + prefix + 'transform: rotateX(15deg); }' + '100% {' + prefix + 'transform: rotateX(0deg); }' + '}'); // Swing in utils.inject( '@' + prefix + 'keyframes swing-in {' + '0% {' + prefix + 'transform: rotateX(0deg); }' + '50% {' + prefix + 'transform: rotateX(-10deg); }' + '90% {' + prefix + 'transform: rotateX(15deg); }' + '100% {' + prefix + 'transform: rotateX(0deg); }' + '}'); // Shading (unfold) utils.inject( '@' + prefix + 'keyframes unfold-over {' + '0% { opacity: 1.0; }' + '100% { opacity: 0.0; }' + '}'); // Shading (fold) utils.inject( '@' + prefix + 'keyframes fold-over {' + '0% { opacity: 0.0; }' + '100% { opacity: 1.0; }' + '}'); // Node styles utils.inject( '.node {' + 'position: relative;' + 'display: block;' + '}'); // Face styles utils.inject( '.face {' + 'pointer-events: none;' + 'position: absolute;' + 'display: block;' + 'height: 100%;' + 'width: 100%;' + 'left: 0;' + 'top: 0;' + '}'); } // Merge options & defaults var opts = $.extend( {}, $.fn.Countries.defaults, options ); // Extract api method arguments var args = Array.prototype.slice.call( arguments, 1 ); // Main plugin loop return this.each( function () { // If the user is calling a method... if ( api[ options ] ) { return api[ options ].apply( this, args ); } // Store options in view $this = $( this ).data( opts ); // Only proceed if the scene hierarchy isn't already built if ( !$this.data( 'initialized' ) ) { $this.data( 'initialized', true ); // Select the first level of matching child elements $kids = $this.children( opts.selector ); // Build a scene graph for elements $root = $( markup.node ).addClass( 'root' ); $base = $root; // Process each element and insert into hierarchy $kids.each( function( index, el ) { $item = $( el ); // Which animation should this node use? anim = 'fold' + ( !index ? '-first' : '' ); // Since we're adding absolutely positioned children $item.css( 'position', 'relative' ); // Give the item some depth to avoid clipping artefacts $item.css(utils.prefix({ 'transform-style': 'preserve-3d', 'transform': 'translateZ(-0.1px)' })); // Create back face $back = $( markup.back ); $back.css( 'background', $item.css( 'background' ) ); $back.css(utils.prefix({ 'transform': 'translateZ(-0.1px)' })); // Create shading $over = $( markup.over ); $over.css(utils.prefix({ 'transform': 'translateZ(0.1px)' })); $over.css({ 'background': opts.shading, 'opacity': 0.0 }); // Begin folded $node = $( markup.node ).append( $item ); $node.css(utils.prefix({ 'transform-origin': '50% 0%', 'transform-style': 'preserve-3d', 'animation': anim + ' 1ms linear 0s 1 normal forwards' })); // Build display list $item.append( $over ); $item.append( $back ); $base.append( $node ); // Use as parent in next iteration $base = $node; }); // Set root transform settings $root.css(utils.prefix({ 'transform-origin': '50% 0%', 'transform-style': 'preserve-3d' })); // Apply perspective $this.css(utils.prefix({ 'transform': 'perspective(' + opts.perspective + 'px)' })); // Display the scene $this.append( $root ); } }); }; // Default options $.fn.Countries.defaults = { // Perspective to apply to rotating elements perspective: 1200, // Default shading to apply (null => no shading) shading: 'rgba(0,0,0,0.12)', // Area of rotation (fraction or pixel value) selector: null, // Fraction of speed (0-1) overlap: 0.6, // Duration per element speed: 0.8, // Animation curve easing: 'ease-in-out' }; $.fn.Countries.enabled = canRun; })( jQuery ); // The `enabled` flag will be `false` if CSS 3D isn't available if ( $.fn.Countries.enabled ) { var $India = $( '.India' ); var $lebanon = $( '.lebanon' ); var $UAE = $( '.UAE' ); // Create Makisus $lebanon.Countries({ selector: 'dd', overlap: 0.85, speed: 1.7 }); $UAE.Countries({ selector: 'dd', overlap: 0.6, speed: 0.85 }); $India.Countries({ selector: 'dd', overlap: 0.2, speed: 0.5 }); // Open all $( '.list' ).Countries( 'open' ); // Toggle on click $( '.toggle' ).on( 'click', function() { $( '.list' ).Countries( 'toggle' ); }); // Disable all links $( '.demo a' ).click( function( event ) { event.preventDefault(); }); }