If you want to add CSS3 transitions to a WordPress drop-down menu on a website based on Foundation framework, you only need to add some CSS classes and some CSS code, without any requirement for jQuery or some other JS library.
The first thing is to add either class or ID (your choice) to the first container above the first level <ul> element. Let me show you an example on a FoundationPress theme, a starter-theme for WordPress built with Foundation, built by Ole Fredrik Lie. Needless to say, I highly recommend this theme for any WordPress project based on foundation (it has custom walker class implemented – do I need to say more? 🙂 ). So this is the code:
|
1 2 3 4 |
<section class="top-bar-section"> <?php foundationpress_top_bar_l(); ?> <?php foundationpress_top_bar_r(); ?> </section> |
And this is where you would add CSS class or ID. Let’s use .fd-animate class for now:
|
1 2 3 4 |
<section class="top-bar-section fd-animate"> <?php foundationpress_top_bar_l(); ?> <?php foundationpress_top_bar_r(); ?> </section> |
And now all that we need is CSS (this theme is using Sass, but I will show “pure” CSS for those who don’t use the Sass approach):
|
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 |
.fd-animate ul li ul li { max-height: 0; position: absolute; -webkit-transition: max-height 1.2s ease-out; -moz-transition: max-height 1.2s ease-out; -ms-transition: max-height 1.2s ease-out; -o-transition: max-height 1.2s ease-out; transition: max-height 1.2s ease-out; } .fd-animate ul li ul li:hover > ul > li { max-height: 100px; height:auto; position: relative; } .fd-animate > ul > li:hover > ul { left: 0; } .fd-animate > ul > li:hover > ul > li { max-height: 100px; height:auto; position: relative; } .fd-animate > ul > li > ul { width: auto; min-width:200px; display: block; } |
For positioning purposes, you may want to overwrite default foundation CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.top-bar-section .right li .dropdown { left: 0; min-width:200px; right: 0; } .top-bar-section .right li .dropdown li .dropdown { left: 100%; right: 100%; } .top-bar-section .dropdown li a { white-space: normal; } |
This may be a bit rough code which you can modify for your purposes, but the main point is that it covers the idea of adding transitions to WordPress drop-down menu based on foundation framework.