3D flipping navigation menu using CSS
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
This tweak will turn Divi’s menu into a 3D flipping menu, adding a little animation and character to your website.
As you can see from the demo, the flipping effects are fun and look great. You can do black and white or incorporate different colors. I do have to give credit to the original source, which is 95% of the menu code.
This tweak has been updated to work with versions of Divi 2.4 and up. For older version of Divi, please scroll down for the legacy tutorial.
The first thing we need to do is add the jQuery script I’ve created to simplify the process. In the original tutorial, I was hard coding the menu into the header.php file. Using jQuery, we can avoid this and add the necessary classes and containers without bypassing Divi’s menu. This means you can create your menu as normal in the dashboard. The following script will do all of the work.
Place the script either in the Epanel->Integration tab in the “Add code to the <body>…..” section or directly in the header.php file of your child theme. If you add it to the header, you’ll want to paste it just above the </head> tag:
|
1 2 3 4 5 6 7 8 |
<script> jQuery( '#top-menu' ).addClass( 'panel block-menu' ); jQuery( '#top-menu li' ).each(function() { var linkText = jQuery(this).text(); var linkUrl = jQuery(this).find('a').attr( 'href' ); jQuery(this).html( '<a href="' + linkUrl + '" class="three-d">' + linkText + '<span aria-hidden="true" class="three-d-box"><span class="front">'+linkText+'</span><span class="back">'+linkText+'</span></span>' ); }); </script> |
CSS
Add the following to your stylesheet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
/*-------------------[960px]------------------*/ @media only screen and ( min-width: 981px ) { /* --------------Begin navigation animation---------------- */ * basic menu styles */ .block-menu { display: block; background: #000; } .block-menu li a { color: #000; display: block; text-decoration: none; font-family: 'Passion One', Arial, sans-serif; font-smoothing: antialiased; text-transform: uppercase; overflow: hidden; line-height: 20px; font-size: 18px; padding: 15px 10px !important; perspective: 1000px; margin-bottom: 10px; } /* animation domination */ .three-d { perspective: 200px; transition: all .07s linear; -webkit-transition: all .07s linear; -moz-transition: all .07s linear; -ms-transition: all .07s linear; -o-transition: all .07s linear; position: relative; cursor: pointer; } /* complete the animation! */ .three-d:hover .three-d-box, .three-d:focus .three-d-box { transform: translateZ(-25px) rotateX(90deg); -webkit-transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); -ms-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); } .three-d-box { transition: all .3s ease-out; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transform: translatez(-25px); -webkit-transform: translatez(-25px); -moz-transform: translatez(-25px); -ms-transform: translatez(-25px); -o-transform: translatez(-25px); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /* put the "front" and "back" elements into place with CSS transforms, specifically translation and translatez */ .front { transform: rotatex(0deg) translatez(25px); -webkit-transform: rotatex(0deg) translatez(25px); -moz-transform: rotatex(0deg) translatez(25px); -ms-transform: rotatex(0deg) translatez(25px); -o-transform: rotatex(0deg) translatez(25px); } .back { transform: rotatex(-90deg) translatez(25px); -webkit-transform: rotatex(-90deg) translatez(25px); -moz-transform: rotatex(-90deg) translatez(25px); -ms-transform: rotatex(-90deg) translatez(25px); -o-transform: rotatex(-90deg) translatez(25px); color: #fff; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 15px 10px; color: #fff; pointer-events: none; box-sizing: border-box; } .front { background: #fff; color: #000; } .back { background: #852CE5; } /* ------------End navigation animation--------------- */ } /*-------------------[768px]------------------*/ @media only screen and ( max-width: 980px ) { .front, .back { display: none; } } |
You can use the .front selector in the styles above to change the font and background colors before it flips and the .back selector to change the colors after it flips. I also limited the 3D effects to desktop only. On mobile, the menu should function and appear as it does in default Divi.
Below is the original tutorial for Divi 2.1:
Everything is done in CSS but there is one catch. Divi creates the menu using a built-in WordPress function. Since we need to add special class and span tags, we’ll have to bypass the function and create the menu manually. New pages will need to be manually added to this menu. It’s easy to do though so as long as that’s not a deal breaker, check out the final product below and let’s get started.
PHP
Locate this file: /themes/Divi/header.php
Make a copy of this file in your child theme or edit it directly
Find the following code near line 141:
|
1 2 3 4 5 6 7 8 |
<ul id="top-menu" class="<?php echo esc_attr( $menuClass ); ?>"> <?php if ( 'on' == et_get_option( 'divi_home_link' ) ) { ?> <li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'Divi' ); ?></a></li> <?php }; ?> <?php show_page_menu( $menuClass, false, false ); ?> <?php show_categories_menu( $menuClass, false ); ?> </ul> |
Change it to this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<ul id="top-menu" class="<?php echo esc_attr( $menuClass ); ?> panel block-menu"> <li><a href="#" class="three-d"> Home <span aria-hidden="true" class="three-d-box"> <span class="front">Home</span> <span class="back">Home</span> </span> </a></li> <li><a href="#" class="three-d"> Blog <span aria-hidden="true" class="three-d-box"> <span class="front">Blog</span> <span class="back">Blog</span> </span> </a></li> <li><a href="#" class="three-d"> About <span aria-hidden="true" class="three-d-box"> <span class="front">About</span> <span class="back">About</span> </span> </a></li> <li><a href="#" class="three-d"> Questions? <span aria-hidden="true" class="three-d-box"> <span class="front">Questions?</span> <span class="back">Contact Us</span> </span> </a></li> </ul> |
The link title is repeated three times for each link. The first occurrence is a fallback for older browsers. The second is within the “front” span class and is what you see before hovering. And the third is within the “back” span class and is what you see on hover. Nothing too complicated. Remember this will replace your auto-created menu and removes the ability to control the menu using the Epanel. Any changes will need to be made in the header.php file.
CSS
Locate your style.css file or edit within your child theme style.css
Add the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/* --------------Begin navigation animation---------------- */ * basic menu styles */ .block-menu { display: block; background: #000; } .block-menu li { display: inline-block; } .block-menu li a { color: #000; display: block; text-decoration: none; font-family: 'Passion One', Arial, sans-serif; font-smoothing: antialiased; text-transform: uppercase; overflow: hidden; line-height: 20px; font-size: 18px; padding: 15px 10px; perspective: 1000px; } /* animation domination */ .three-d { perspective: 200px; transition: all .07s linear; -webkit-transition: all .07s linear; -moz-transition: all .07s linear; -ms-transition: all .07s linear; -o-transition: all .07s linear; position: relative; cursor: pointer; } /* complete the animation! */ .three-d:hover .three-d-box, .three-d:focus .three-d-box { transform: translateZ(-25px) rotateX(90deg); -webkit-transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); -ms-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); } .three-d-box { transition: all .3s ease-out; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transform: translatez(-25px); -webkit-transform: translatez(-25px); -moz-transform: translatez(-25px); -ms-transform: translatez(-25px); -o-transform: translatez(-25px); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /* put the "front" and "back" elements into place with CSS transforms, specifically translation and translatez */ .front { transform: rotatex(0deg) translatez(25px); -webkit-transform: rotatex(0deg) translatez(25px); -moz-transform: rotatex(0deg) translatez(25px); -ms-transform: rotatex(0deg) translatez(25px); -o-transform: rotatex(0deg) translatez(25px); } .back { transform: rotatex(-90deg) translatez(25px); -webkit-transform: rotatex(-90deg) translatez(25px); -moz-transform: rotatex(-90deg) translatez(25px); -ms-transform: rotatex(-90deg) translatez(25px); -o-transform: rotatex(-90deg) translatez(25px); color: #ffe7c4; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 15px 10px; color: white; pointer-events: none; box-sizing: border-box; } .front { background: #fff; color: #000; } .back { background: #000; } /* ------------End navigation animation--------------- */ |
This should work on Divi 2.1 and any theme by Elegant Themes for that matter. You may have to adjust the padding in .block-menu li a if you try this on another theme. You can adjust font colors and background colors by editing .back and .front. Enjoy and please feel free to leave comments if you have a better solution or a solution that would still allow control of the links from the Epanel.
11 Comments
Thanks, dont work in Divi 2.5, how to do…. thanks
December 9, 2015
Hi Belay. I’ve updated the tutorial to work on Divi 2.4 and up. Tested on Divi 2.5.6 and works great. Check out the demo at the top of the post. Thanks
December 9, 2015
Hi Brad, Thank you for your quick response (very professional)
it works at 100% in Divi 2.5 Merci-Thanks.
December 10, 2015
Add a closing tag } before /* ————End navigation animation————— */ and it will work.
January 28, 2016
Brad, how to modify the script for the drop down menu ( ‘#top-menu li ul li’)? thanks
December 10, 2015
WPML dropdown selector is compatible? thanks Brad
December 11, 2015
Sorry for the late response but for anyone else interested. This tweak is probably not ideal for dropdown menus. I suppose you could modify it to show the dropdown menu on the flip. But to integrate it into this might be more work than it’s worth. This is more suited for a simple navigation menu.
March 15, 2016
hi Brad
i like your posts 3d flipping nav menu and.. I have one request for you..
please tel us how do i use “JQuery Accordion Menu” in primary menu.. not in widgets..
or how to create an “accordian menu” for divi…
please give this tweaks…
May 3, 2016
Is there a way to add the js code in an external js file w/out conflicting with the mobile nav?
September 24, 2016
hey there, did not work on mobile for me, i am on divi 2.7.5
Thanks
October 19, 2016
So I have had the legacy version on a site for years with an added code that puts the menu on the bottom until scroll then sticks it to the top. The new version does not work with my code. Any suggestions?
March 22, 2017