SELECT - dropdown.js - EFX Version - ANIMATED

by bizamajig

HTML

<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/modernizr.custom.63321.js"></script>
<div style="padding: 30px; background-color: #f3c100;">
<select id="mydropdown" class="cd-select">
    <option value="-1" selected="selected">BLANK</option>
    <option value="1">View</option>
    <option value="2">Edit</option>
    <option value="3">Delete</option>
</select>
</div>
<script>
//    SEE: http://jsfiddle.net/bizamajig/k0h86eow/
/**
 * 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';

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

	// the options
	$.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; }
	};

	$.DropDown.prototype = {

		_init : function( options ) {

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

		},
		_layout : function() {

			var self = this;
			this.minZIndex = 1000;
			var value = this._transformSelect();
			this.opts = this.listopts.children( 'li' );
			this.optsCount = this.opts.length;
			this.size = { width : this.dd.width(), height : this.dd.height() };
			
			var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
				inputName = elName !== undefined ? elName : elId !== undefined...

CSS

/* START Bizamajig Customization - SELECT - codrops */
.cd-dropdown,
.cd-select {
	xxx-margin: 20px auto;
	position: relative;
	width: 100%; /* 300px; */
	display: block;
}
.cd-dropdown > span { /* Current Value Displayed */
    padding: 0 0 0 5px; /* Space on right for up/down arrow icon */ /* 0 50px 0 30px; */
	width: auto; /* 100%; */
	height: 30px;
	line-height: 30px;
	position: relative;
	display: block;
    font-family: "bizamajig-glyph-icons";
	font-weight: 700;
	xxx-font-size: 16px;
	background: #fff;
	color: #999;
	cursor: pointer;
}
.xxx-cd-dropdown > span:after { /* Current Value Displayed */
	xxx-padding: 10px;
    position: absolute;
	top: 0 /* 5%; 15%; */
	right: 0px;
	width: 50px;
	text-align: center;
	font-size: 1em /* 12px; */
	height: auto; /* 70%; */
	xxx-line-height: 1em; /* 24px; */
	border-left: 1px solid #ddd;
    /*content: '\25BC';*/
    content: "";
}
.xxx-cd-dropdown.cd-active > span:after { /* Current Value Displayed */
	/*content: '\25B2';*/
    content: "";
}
.cd-dropdown ul {
	margin: 0;
	padding: 0;
	position: relative;
	list-style-type: none;
	display: block;
}
.cd-dropdown ul li {
	display: block;
}
.cd-dropdown ul li span { /* Dropdown options */
	padding: 0; /* Space on right to match up/down arrow space in first item space */ /* 0 30px 0 75px; */
	width: auto; /* 100%; */
	display: block;
	line-height: 30px;
	font-weight: 700;
	background: #fff;
	color: #bcbcbc;
	cursor: pointer;
}
.cd-dropdown > span,
.cd-dropdown ul li span {
	-webkit-backface-visibility: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.cd-dropdown > span span[class^="icon-"],
.cd-dropdown > span span[class*=" icon-"]{
	padding: 0 30px 0 45px;
}
/* Select fallback styling */
.cd-select {
	xxx-border: 1px solid #ddd;
}
/* START style5.css */
.cd-dropdown ul {
	position: absolute;
	top: 0px;
	width: 100%;
}
.cd-dropdown > span,
.cd-dropdown ul...

JavaScript

$('select').dropdown({
			gutter: 						0,
//			slidingIn: 						100,
			stack: 							false,
        onOptionSelect: function(e) {
/*
            var counter = ($(e).html()).split('data-value="')[1].split('"')[0];
            alert( counter );
*/
            alert( $( e ).data( 'value' ) );
        }
});