jQuery JavaScript library<\/a> by adding the following CDN link just before closing the body tag:<\/p>\n<script src='\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'><\/script>\r\n<\/pre>\n5. Finally, initialize the dropdowns using jQuery and the provided JavaScript functions, specifying parameters like selector, overlap, and speed for each dropdown.<\/p>\n
\/**\r\n * Copyright (C) 2012 by Justin Windle\r\n *\r\n * Permission is hereby granted, free of charge, to any person obtaining a copy\r\n * of this software and associated documentation files (the \"Software\"), to deal\r\n * in the Software without restriction, including without limitation the rights\r\n * to use, copy, modify, merge, publish, distribute, sublicense, and\/or sell\r\n * copies of the Software, and to permit persons to whom the Software is\r\n * furnished to do so, subject to the following conditions:\r\n *\r\n * The above copyright notice and this permission notice shall be included in\r\n * all copies or substantial portions of the Software.\r\n *\r\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\r\n * THE SOFTWARE.\r\n *\/\r\n\r\n(function($) {\r\n\r\n \/\/ Global initialisation flag\r\n var initialized = false;\r\n\r\n \/\/ For detecting browser prefix and capabilities\r\n var el = document.createElement( 'div' );\r\n var re = \/^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])\/;\r\n\r\n \/\/ Establish vendor prefix and CSS 3D support\r\n var vendor = (function() { for ( var p in el.style ) if( re.test(p) ) return p.match(re)[0]; })() || '';\r\n var canRun = vendor + 'Perspective' in el.style;\r\n var prefix = '-' + vendor.toLowerCase() + '-';\r\n\r\n var $this, $root, $base, $kids, $node, $item, $over, $back;\r\n var wait, anim, last;\r\n\r\n \/\/ Public API\r\n var api = {\r\n\r\n \/\/ Toggle open \/ closed\r\n toggle: function() {\r\n\r\n $this = $( this );\r\n $this.makisu( $this.hasClass( 'open' ) ? 'close' : 'open' );\r\n },\r\n\r\n \/\/ Trigger the unfold animation\r\n open: function( speed, overlap, easing ) {\r\n\r\n \/\/ Cache DOM references\r\n $this = $(this);\r\n $root = $this.find( '.root' );\r\n $kids = $this.find( '.node' ).not( $root );\r\n\r\n \/\/ Establish values or fallbacks\r\n speed = utils.resolve( $this, 'speed', speed );\r\n easing = utils.resolve( $this, 'easing', easing );\r\n overlap = utils.resolve( $this, 'overlap', overlap );\r\n\r\n $kids.each( function( index, el ) {\r\n\r\n \/\/ Establish settings for this iteration\r\n anim = 'unfold' + ( !index ? '-first' : '' );\r\n last = index === $kids.length - 1;\r\n time = speed * ( 1 - overlap );\r\n wait = index * time;\r\n\r\n \/\/ Cache DOM references\r\n $item = $( el );\r\n $over = $item.find( '.over' );\r\n\r\n \/\/ Element animation\r\n $item.css(utils.prefix({\r\n 'transform': 'rotateX(180deg)',\r\n 'animation': anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards'\r\n }));\r\n\r\n \/\/ Shading animation happens when the next item starts\r\n if ( !last ) wait = ( index + 1 ) * time;\r\n\r\n \/\/ Shading animation\r\n $over.css(utils.prefix({\r\n 'animation': 'unfold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards'\r\n }));\r\n });\r\n\r\n \/\/ Add momentum to the container\r\n $root.css(utils.prefix({\r\n 'animation': 'swing-out ' + ( $kids.length * time * 1.4 ) + 's ease-in-out 0s 1 normal forwards'\r\n }));\r\n\r\n $this.addClass( 'open' );\r\n },\r\n\r\n \/\/ Trigger the fold animation\r\n close: function( speed, overlap, easing ) {\r\n\r\n \/\/ Cache DOM references\r\n $this = $(this);\r\n $root = $this.find( '.root' );\r\n $kids = $this.find( '.node' ).not( $root );\r\n\r\n \/\/ Establish values or fallbacks\r\n speed = utils.resolve( $this, 'speed', speed ) * 0.66;\r\n easing = utils.resolve( $this, 'easing', easing );\r\n overlap = utils.resolve( $this, 'overlap', overlap );\r\n\r\n $kids.each( function( index, el ) {\r\n\r\n \/\/ Establish settings for this iteration\r\n anim = 'fold' + ( !index ? '-first' : '' );\r\n last = index === 0;\r\n time = speed * ( 1 - overlap );\r\n wait = ( $kids.length - index - 1 ) * time;\r\n\r\n \/\/ Cache DOM references\r\n $item = $( el );\r\n $over = $item.find( '.over' );\r\n\r\n \/\/ Element animation\r\n $item.css(utils.prefix({\r\n 'transform': 'rotateX(0deg)',\r\n 'animation': anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards'\r\n }));\r\n\r\n \/\/ Adjust delay for shading\r\n if ( !last ) wait = ( ( $kids.length - index - 2 ) * time ) + ( speed * 0.35 );\r\n\r\n \/\/ Shading animation\r\n $over.css(utils.prefix({\r\n 'animation': 'fold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards'\r\n }));\r\n });\r\n\r\n \/\/ Add momentum to the container\r\n $root.css(utils.prefix({\r\n 'animation': 'swing-in ' + ( $kids.length * time * 1.0 ) + 's ease-in-out 0s 1 normal forwards'\r\n }));\r\n\r\n $this.removeClass( 'open' );\r\n }\r\n };\r\n\r\n \/\/ Utils\r\n var utils = {\r\n\r\n \/\/ Resolves argument values to defaults\r\n resolve: function( $el, key, val ) {\r\n return typeof val === 'undefined' ? $el.data( key ) : val;\r\n },\r\n\r\n \/\/ Prefixes a hash of styles with the current vendor\r\n prefix: function( style ) {\r\n \r\n for ( var key in style ) {\r\n style[ prefix + key ] = style[ key ];\r\n }\r\n\r\n return style;\r\n },\r\n\r\n \/\/ Inserts rules into the document styles\r\n inject: function( rule ) {\r\n\r\n try {\r\n\r\n var style = document.createElement( 'style' );\r\n style.innerHTML = rule;\r\n document.getElementsByTagName( 'head' )[0].appendChild( style );\r\n\r\n } catch ( error ) {}\r\n }\r\n };\r\n\r\n \/\/ Element templates\r\n var markup = {\r\n node: '<span class=\"node\"\/>',\r\n back: '<span class=\"face back\"\/>',\r\n over: '<span class=\"face over\"\/>'\r\n };\r\n\r\n \/\/ Plugin definition\r\n $.fn.makisu = function( options ) {\r\n\r\n \/\/ Notify if 3D isn't available\r\n if ( !canRun ) {\r\n\r\n var message = 'Failed to detect CSS 3D support';\r\n\r\n if( console && console.warn ) {\r\n \r\n \/\/ Print warning to the console\r\n console.warn( message );\r\n\r\n \/\/ Trigger errors on elements\r\n this.each( function() {\r\n $( this ).trigger( 'error', message );\r\n });\r\n }\r\n\r\n return;\r\n }\r\n\r\n \/\/ Fires only once\r\n if ( !initialized ) {\r\n\r\n initialized = true;\r\n\r\n \/\/ Unfold\r\n utils.inject( '@' + prefix + 'keyframes unfold {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(180deg); }' +\r\n '50% {' + prefix + 'transform: rotateX(-30deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(0deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Unfold (first item)\r\n utils.inject( '@' + prefix + 'keyframes unfold-first {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(-90deg); }' +\r\n '50% {' + prefix + 'transform: rotateX(60deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(0deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Fold\r\n utils.inject( '@' + prefix + 'keyframes fold {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(0deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(180deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Fold (first item)\r\n utils.inject( '@' + prefix + 'keyframes fold-first {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(0deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(-180deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Swing out\r\n utils.inject( '@' + prefix + 'keyframes swing-out {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(0deg); }' +\r\n '30% {' + prefix + 'transform: rotateX(-30deg); }' +\r\n '60% {' + prefix + 'transform: rotateX(15deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(0deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Swing in\r\n utils.inject( '@' + prefix + 'keyframes swing-in {' +\r\n\r\n '0% {' + prefix + 'transform: rotateX(0deg); }' +\r\n '50% {' + prefix + 'transform: rotateX(-10deg); }' +\r\n '90% {' + prefix + 'transform: rotateX(15deg); }' +\r\n '100% {' + prefix + 'transform: rotateX(0deg); }' +\r\n\r\n '}');\r\n\r\n \/\/ Shading (unfold)\r\n utils.inject( '@' + prefix + 'keyframes unfold-over {' +\r\n '0% { opacity: 1.0; }' +\r\n '100% { opacity: 0.0; }' +\r\n '}');\r\n\r\n \/\/ Shading (fold)\r\n utils.inject( '@' + prefix + 'keyframes fold-over {' +\r\n '0% { opacity: 0.0; }' +\r\n '100% { opacity: 1.0; }' +\r\n '}');\r\n\r\n \/\/ Node styles\r\n utils.inject( '.node {' +\r\n 'position: relative;' +\r\n 'display: block;' +\r\n '}');\r\n\r\n \/\/ Face styles\r\n utils.inject( '.face {' +\r\n 'pointer-events: none;' +\r\n 'position: absolute;' +\r\n 'display: block;' +\r\n 'height: 100%;' +\r\n 'width: 100%;' +\r\n 'left: 0;' +\r\n 'top: 0;' +\r\n '}');\r\n }\r\n\r\n \/\/ Merge options & defaults\r\n var opts = $.extend( {}, $.fn.makisu.defaults, options );\r\n\r\n \/\/ Extract api method arguments\r\n var args = Array.prototype.slice.call( arguments, 1 );\r\n\r\n \/\/ Main plugin loop\r\n return this.each( function () {\r\n\r\n \/\/ If the user is calling a method...\r\n if ( api[ options ] ) {\r\n return api[ options ].apply( this, args );\r\n }\r\n\r\n \/\/ Store options in view\r\n $this = $( this ).data( opts );\r\n\r\n \/\/ Only proceed if the scene hierarchy isn't already built\r\n if ( !$this.data( 'initialized' ) ) {\r\n\r\n $this.data( 'initialized', true );\r\n\r\n \/\/ Select the first level of matching child elements\r\n $kids = $this.children( opts.selector );\r\n\r\n \/\/ Build a scene graph for elements\r\n $root = $( markup.node ).addClass( 'root' );\r\n $base = $root;\r\n \r\n \/\/ Process each element and insert into hierarchy\r\n $kids.each( function( index, el ) {\r\n\r\n $item = $( el );\r\n\r\n \/\/ Which animation should this node use?\r\n anim = 'fold' + ( !index ? '-first' : '' );\r\n\r\n \/\/ Since we're adding absolutely positioned children\r\n $item.css( 'position', 'relative' );\r\n\r\n \/\/ Give the item some depth to avoid clipping artefacts\r\n $item.css(utils.prefix({\r\n 'transform-style': 'preserve-3d',\r\n 'transform': 'translateZ(-0.1px)'\r\n }));\r\n\r\n \/\/ Create back face\r\n $back = $( markup.back );\r\n $back.css( 'background', $item.css( 'background' ) );\r\n $back.css(utils.prefix({ 'transform': 'translateZ(-0.1px)' }));\r\n\r\n \/\/ Create shading\r\n $over = $( markup.over );\r\n $over.css(utils.prefix({ 'transform': 'translateZ(0.1px)' }));\r\n $over.css({\r\n 'background': opts.shading,\r\n 'opacity': 0.0\r\n });\r\n \r\n \/\/ Begin folded\r\n $node = $( markup.node ).append( $item );\r\n $node.css(utils.prefix({\r\n 'transform-origin': '50% 0%',\r\n 'transform-style': 'preserve-3d',\r\n 'animation': anim + ' 1ms linear 0s 1 normal forwards'\r\n }));\r\n\r\n \/\/ Build display list\r\n $item.append( $over );\r\n $item.append( $back );\r\n $base.append( $node );\r\n\r\n \/\/ Use as parent in next iteration\r\n $base = $node;\r\n });\r\n\r\n \/\/ Set root transform settings\r\n $root.css(utils.prefix({\r\n 'transform-origin': '50% 0%',\r\n 'transform-style': 'preserve-3d'\r\n }));\r\n\r\n \/\/ Apply perspective\r\n $this.css(utils.prefix({\r\n 'transform': 'perspective(' + opts.perspective + 'px)'\r\n }));\r\n\r\n \/\/ Display the scene\r\n $this.append( $root );\r\n }\r\n });\r\n };\r\n\r\n \/\/ Default options\r\n $.fn.makisu.defaults = {\r\n\r\n \/\/ Perspective to apply to rotating elements\r\n perspective: 1200,\r\n\r\n \/\/ Default shading to apply (null => no shading)\r\n shading: 'rgba(0,0,0,0.12)',\r\n\r\n \/\/ Area of rotation (fraction or pixel value)\r\n selector: null,\r\n\r\n \/\/ Fraction of speed (0-1)\r\n overlap: 0.6,\r\n\r\n \/\/ Duration per element\r\n speed: 0.8,\r\n\r\n \/\/ Animation curve\r\n easing: 'ease-in-out'\r\n };\r\n\r\n $.fn.makisu.enabled = canRun;\r\n\r\n})( jQuery );\r\n\r\n\/\/ The `enabled` flag will be `false` if CSS 3D isn't available\r\n\r\nif ( $.fn.makisu.enabled ) {\r\n\r\n var $sashimi = $( '.sashimi' );\r\n var $nigiri = $( '.nigiri' );\r\n var $maki = $( '.maki' );\r\n\r\n \/\/ Create Makisus\r\n\r\n $nigiri.makisu({\r\n selector: 'dd',\r\n overlap: 0.85,\r\n speed: 1.7\r\n });\r\n\r\n $maki.makisu({\r\n selector: 'dd',\r\n overlap: 0.6,\r\n speed: 0.85\r\n });\r\n\r\n $sashimi.makisu({\r\n selector: 'dd',\r\n overlap: 0.2,\r\n speed: 0.5\r\n });\r\n\r\n \/\/ Open all\r\n \r\n $( '.list' ).makisu( 'open' );\r\n\r\n \/\/ Toggle on click\r\n\r\n $( '.toggle' ).on( 'click', function() {\r\n $( '.list' ).makisu( 'toggle' );\r\n });\r\n\r\n \/\/ Disable all links\r\n\r\n $( '.demo a' ).click( function( event ) {\r\n event.preventDefault();\r\n });\r\n\r\n} else {\r\n\r\n $( '.warning' ).show();\r\n}<\/pre>\nThat’s all! hopefully, you have successfully created a CSS 3d Folding Dropdown on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
The code enables a CSS 3D folding dropdown animation. It creates a visually appealing dropdown effect. It helps add dynamic,…<\/p>\n","protected":false},"author":1,"featured_media":10219,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[],"class_list":["post-10215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu"],"acf":[],"yoast_head":"\n
CSS 3D Folding Dropdown Animation — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS 3D Folding Dropdown Animation — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T18:17:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:18:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS 3D Folding Dropdown Animation\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:18:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\"},\"wordCount\":208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png\",\"articleSection\":[\"Menu & Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\",\"url\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\",\"name\":\"CSS 3D Folding Dropdown Animation — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:18:07+00:00\",\"description\":\"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png\",\"width\":1280,\"height\":960,\"caption\":\"CSS 3D Folding Dropdown Animation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu & Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS 3D Folding Dropdown Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS 3D Folding Dropdown Animation — CodeHim","description":"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/","og_locale":"en_US","og_type":"article","og_title":"CSS 3D Folding Dropdown Animation — CodeHim","og_description":"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:17:00+00:00","article_modified_time":"2024-01-22T11:18:07+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS 3D Folding Dropdown Animation","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:18:07+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/"},"wordCount":208,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png","articleSection":["Menu & Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/","url":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/","name":"CSS 3D Folding Dropdown Animation — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:18:07+00:00","description":"Here is a free code snippet to create a CSS 3D Folding Dropdown Animation. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/CSS-3D-Folding-Dropdown-Animation.png","width":1280,"height":960,"caption":"CSS 3D Folding Dropdown Animation"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/css-3d-folding-dropdown-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu & Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"CSS 3D Folding Dropdown Animation"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1969,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10215"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10219"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}