Sliding dropdown accordion/menu

based on the codrop artcile

HTML

<div class="fx-dropdown">      	
    <h3>Menu / accordion</h3>        
    <ul>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
     <li>Item 01</li>
     <li>Item 02</li>
     <li>Item 03</li>
     <li>Item 04</li>
     <li>Item 05</li>
    </ul>
  </div>

CSS

/* global */
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
   font-size:14px;
   font-family:verdana;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
color: inherit;
text-rendering: optimizelegibility;
    padding:0;
}
ul, li{
    margin:0;
    padding:0;
    list-style: none;
}


/* PLUGIN fx */
.fx-dropdown{
	position:relative;
	display:block;
    width:300;
    margin:2em;
    padding:0;
    
}
.fx-dropdown  h3{
	position:relative;
	cursor: pointer;
    border-top: 1px solid rgba(255,255,255,.7);
    border-bottom: 1px solid #898989;
    font-size: 15px;
    color: #222;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding-left:10px;
    background: rgba(229,229,229,1);
}

.fx-dropdown ul{
	position: absolute;
	top: 0px;
	width: 100%;	
}

.fx-dropdown ul li {
	position: absolute;
	display:block;
	width: 100%;
	height:40px;
    line-height: 40px;
    padding-left: 5px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    background: rgba(249,249,249,1);
    border-bottom: 1px solid #898989;
    border-top: 1px solid rgba(189,189,189,1);
}

.fx-dropdown ul li {
	-webkit-transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	transition: all 0.2s linear 0s;
}

.fx-dropdown ul li:hover {
	background: #fc756f;
	color: #fff;
}

JavaScript

// call plug:
$(document).ready(function(){		
	$( '.fx-dropdown' ).fx_dropdown();

});


// PLUGIN
// extended to work on a regular menu sctructure ul li

/* Based on jquery.dropdown.js v1.0.0

 * http://www.codrops.com *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php *
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

	'use strict';

	$.fx_DropDown = function( options, element ) {
		this.$el = $( element );
		this._init( options );
	};

	// the options
	$.fx_DropDown.defaults = {
		speed : 300,
		easing : 'ease',
		gutter : 0,
		// initial stack effect
		stack : true,
		// delay between each option animation
		delay : 0,
		// random angle and positions for the options
		random : false,
		// rotated [right||left||false] : the options will be rotated to thr right side or left side.
		// make sure to tune the transform origin in the stylesheet
		rotated : false,
		// effect to slide in the options. value is the margin to start with
		slidingIn : false,
		onOptionSelect : function(opt) { return false; }
	};

	$.fx_DropDown.prototype = {

		_init : function( options ) {

			// options
			this.options = $.extend( true, {}, $.fx_DropDown.defaults, options );
			this._layout();
			this._initEvents();
	
		console.log(this.defaults);

		},
		_layout : function() {
		
			var self = this;
					this.minZIndex = 1000;
			this.selectElem=this.$el.children('h3');
			this.listopts = this.$el.children('ul');
			this.opts = this.listopts.children();
			this.optsCount = this.opts.length;
			
			console.log(this.optsCount);
			
			this.size = { width : this.$el.width(), height : this.$el.height() };
					
			this.selectElem.css( 'z-index', this.minZIndex + this.optsCount );
			this._positionOpts();
			setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
		},

		_positionOpts : function( anim ) {

			var self =...