Animation modes for Dropdown Menu

This tutorial tells you about the different options you have at hand to animate the dropdown menu. Edit lib/js/template.js to set up these effects.

Dropdown Menu Animation

There are two several modes to animate the dropdown menu, slide, width, height, and default. We suggest you try them all out to see the difference and check out which effect works best for your site!

All different dropdown menu animation modes

This is the code line for the slide mode:

var dropdown = new YOODropdownMenu('menu', { mode: 'slide', dropdownSelector: 'div.dropdown',
transition: Fx.Transitions.Expo.easeOut }); dropdown.matchHeight();

This is the code line for the height mode:

var dropdown = new YOODropdownMenu('menu', { mode: 'height', dropdownSelector: 'div.dropdown',
transition: Fx.Transitions.Expo.easeOut }); dropdown.matchHeight();

This is the code line for the width mode:

var dropdown = new YOODropdownMenu('menu', { mode: 'width', dropdownSelector: 'div.dropdown',
transition: Fx.Transitions.Expo.easeOut }); dropdown.matchHeight();

This is the code line for the default mode:

var dropdown = new YOODropdownMenu('menu', { dropdownSelector: 'div.dropdown',
transition: Fx.Transitions.Expo.easeOut }); dropdown.matchHeight();