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:

<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:

<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):

.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:

.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.

Post Adding CSS3 transitions to WordPress drop-down menu based on Foundation je prvi puta viđen na bbird.me.