animate/transition a menu with IE 8 support

README.md

an animatable menu with gracefull IE 8 support

long story short:

• you can easily animate/transition the height and also the opacity of the menu, which gives it a nice fade'n'slide entrance.
• IE does not understand transitions or opacity, and depending on your setup, just the height: 0 wouldn't suffice (i.e. when you have negative margins…), so we go for visibility here, which does the – non animated – trick.
• you absoluteley need to do transition on visibility as well, otherwise the menu would just pop in or out of view.
• if you do not need to support IE 8, then forget about visibility, as IE 9 understands opacity, but doesn't understand transitions – which is fine.

script.js

$( ".your-button-class" ).bind( "click", function( event ) {
	$( ".your-menu-class" ).toggleClass( 'isVisible' );
});

styles.scss

.your-menu-class {
	height: 0;
	margin-bottom: 32px;
	margin-top: -8px;
	opacity: 0;
	position: relative;
	transition: height 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
	visibility: hidden; // used by IE
	width: 100%;

	&.isVisible {
		height: 114px;
		opacity: 1;
		visibility: visible; // used by IE
	}