Menu icon Foundation
F6 Topbar Dropdown Animations

I have a standard JointsWP, updated to F6, and I'd like to get simple dropdown animations added onto the submenus. When you hover over a parent element, .has-submenu, I'd like it's subsequent dropdown to fade in and slide down by a few pixels to add effect.

Before, from Foundation 5:

ul li.has-dropdown {
    .dropdown {
        opacity: 0;
        transform: translate(0, -4px);
        transition: all 0.7s ease-in-out;
    }
    &:hover > .dropdown {
        opacity: 1;
        transform: translate(0, 0);
        transition: all 0.7s ease-in-out;
    }
}

But now, with Foundation 6, I can't seem to figure it out. Does not work the same way. I tried implementing Motion UI, but I have no idea how to integrate this with a menu walker.

class Topbar_Menu_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = Array() ) {
	    $indent = str_repeat("\t", $depth);
	    $output .= "\n$indent<ul class=\"menu\">\n";
	}
}
            

         

Can anyone help out? I've no idea how to get this done.

foundation 6scssanimationtopbardropdowntopbarmotion-uimotionuitop-bardrop downanimationsFadeslide

I have a standard JointsWP, updated to F6, and I'd like to get simple dropdown animations added onto the submenus. When you hover over a parent element, .has-submenu, I'd like it's subsequent dropdown to fade in and slide down by a few pixels to add effect.

Before, from Foundation 5:

ul li.has-dropdown {
    .dropdown {
        opacity: 0;
        transform: translate(0, -4px);
        transition: all 0.7s ease-in-out;
    }
    &:hover > .dropdown {
        opacity: 1;
        transform: translate(0, 0);
        transition: all 0.7s ease-in-out;
    }
}

But now, with Foundation 6, I can't seem to figure it out. Does not work the same way. I tried implementing Motion UI, but I have no idea how to integrate this with a menu walker.

class Topbar_Menu_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = Array() ) {
	    $indent = str_repeat("\t", $depth);
	    $output .= "\n$indent<ul class=\"menu\">\n";
	}
}
            

         

Can anyone help out? I've no idea how to get this done.

Marco Messa over 3 years ago

My solution is different, I hooked on show.zf.dropdownmenu and hide.zf.dropdownmenu events and edit css and animate dropdowns:

 $('#primary-menu').on(
    'show.zf.dropdownmenu', function() {
      var dropdown = $(this).find('.is-dropdown-submenu');
      dropdown.css('display', 'none');
      dropdown.fadeIn('fast');
  });
  $('#primary-menu').on(
    'hide.zf.dropdownmenu', function() {
      var dropdown = $(this).find('.is-dropdown-submenu');
      dropdown.css('display', 'inherit');
      dropdown.fadeOut('fast');
  });

Leif Birnbaum over 2 years ago

@jinch @napishu

I partially solved this by changing the display property in this function to 'none' which eliminates the out animation - but at least you don't get the menus all flashing at once. Still poking around...

jQuery(".dropdown").on('hide.zf.dropdownmenu', function (ev, $el) {
    $el.children("ul")
    .css('display', 'none')
		.slideUp(250);
  });

Rafi Benkual over 3 years ago

Nice - you're hooking into the MotionUI classes?

I put together a demo of what you did here: http://codepen.io/rafibomb/pen/qZBbaO

Good solution and thanks for sharing!

Franek Dolas about 3 years ago

Rafi Benkual, with this solution if You have nested more levels all items show up when hovering over the top level item.

Franek Dolas about 3 years ago

Rafi Benkual, with this solution if You have nested more levels all items show up when hovering over the top level item.

Franek Dolas about 3 years ago

Rafi Benkual, with this solution if You have nested more levels all items show up when hovering over the top level item.

Rafi Benkual almost 4 years ago

This is pretty challenging to do. Perhaps some of these examples might help:

slideToggle is the simplest - http://codepen.io/jaywerra/pen/fIcGv

Or with CSS
http://codepen.io/wzy1990/pen/jFsKt

Leif Birnbaum over 2 years ago

I'm having the same issue. If I have two dropdown menu items side-by-side, and I hover over one. Then hover over the next - all dropdown menus flash open and slide closed. It's weird because I cannot replicate in the codepen that @napishu supplied - different version of foundation?

jinch over 2 years ago

@Leif

Thanks for sharing your resolution :). I ended up avoiding the animation on my end for the sake of progress but with this I may give it another go.

~  appreciated

Leif Birnbaum over 2 years ago

@jinch

I just ended up removing the out animation altogether and just use the in animation. A little less javascript and a little less buggy :)

jinch over 2 years ago

As mentioned above... this only works with only drop down / if you have multiple nested menu's - they all show.

How do you target just first nested menu / than the second only on hover?

napishu over 2 years ago

@jinch

Working example http://codepen.io/anephew/pen/VpWRRX

 

 

jinch over 2 years ago

@napishu ~ you saved the day!!!!!

THANK YOU!

jinch over 2 years ago

@napishu ~ quick question...

The code works great and it works exactly how I was envisioning... however, I noticed a small bug: /

If you scroll off the menu and then move your mouse back quickly before it fully closes / the menu will start to flash open and closed repetitively. This mostly happens on longer menus // also noticed that it effects other menus on the page. Meaning if you don't allow it to completely finish animating close before you trigger again / you will get a flash of all menus opening simultaneously. I tried messing with the default hover and close time settings but it didn't seem to make a difference.

Is there a way to avoid this flashing content? Perhaps a reset or delay to prevent it from triggering before the menu is ready to animate again?