Updated README

README.MD

@@ -1,3 +1,4 @@
 ## Material Dropdown
-
+Transforms your standard boring HTML <select> into a minimalistic beauty. 
+Inspired by the animations of the actual dropdown in Material Design. 
 

dropdown.js

@@ -1,14 +1,20 @@
+var dropdown_count = 0;
 (function ( $ ) {
 
 	$.fn.dropdown = function(options){
-		var element = this;
+		var element = $(this);
+		var opts = $.extend({}, $.fn.dropdown.defaults, options)
+		
+		build(element, opts);
 		
-		var options = $(this).children('option');
-		build(element);
 		$('body').on('click', '.dropdown', function(){
 			animate($(this));
 		})
 
+		$('body').on('click', '.dropdown ul li a', function(){
+			setValue($(this).parents('.dropdown'), $(this).parent('li').index())
+		})
+
 		$(document).mouseup(function (e)
 		{
 		    var dropdown = $(".dropdown");
@@ -28,27 +34,59 @@
 		}
 	};
 
-	function build(element){
-		var placeholder = element.attr('data-placeholder')
+	$.fn.dropdown.defaults = {
+		background: "#e5e5e5",
+		onOpen_background: "#fff",
+		placeholder_color: "#000",
+		link_color: "#000"
+	}
 
+	function build(element, opts){
+		dropdown_count += 1
+		var placeholder = element.attr('data-placeholder')
+		var id = element.attr('id')
 		var options = element.children('option')
 		var selected = false;
 		var classes = "dropdown";
 		var options_html = '';
+
+		var background = opts["background"]
+		var onOpen_background = opts["onOpen_background"]
+		var placeholder_color = opts["placeholder_color"]
+		var link_color = opts["link_color"]
+
 		options.each(function(){
 			if ( $(this).attr('selected') == "selected") {
-				selected = true
+				selected = $(this).text()
 			}
 			options_html += '<li><a>'+ $(this).text() +'</a></li>';
 		})
 
-		if ( selected == true ) {
+		if ( selected !== false ) {
 			classes += ' hasValue';
 		}
 
-		var dropdown_html = '<div class = "dropdown"><div class = "bg"></div>';
+		if (typeof id !== typeof undefined && id !== false) {
+			id_html = id
+		} else {
+			id_html = 'dropdown_' + dropdown_count;
+			$(element).attr('id', id_html)
+		}
+
+
+
+		
+
+		var dropdown_html = '<div id="euler_'+ id_html +'" data-select="'+ id_html +'" class = "'+ classes +'"><div class = "bg"></div>';
 			dropdown_html += '<div class = "front_face">'
-				dropdown_html += '<span class = "placeholder=">'+ placeholder +'</span>'
+				dropdown_html += '<div class = "bg"></div>'
+				dropdown_html += '<div class = "content">'
+					if ( selected !== false ) {
+						dropdown_html += '<span class="current_value">'+ selected +'</span>';
+					}
+					dropdown_html += '<span class = "placeholder">'+ placeholder +'</span>'
+					dropdown_html += '<i class = "icon">'+ icon() +'</i>'
+				dropdown_html += '</div>'
 			dropdown_html += '</div>';
 			dropdown_html += '<div class = "back_face"><ul>'
 				dropdown_html += options_html
@@ -56,11 +94,15 @@
 		dropdown_html += '</div>';
 
 		$(dropdown_html).insertAfter(element)
+		$('#euler_' + id_html).css("height", $('#euler_' + id_html).outerHeight() - $('#euler_' + id_html).find('.back_face').outerHeight() )
 		element.hide()
 		
 	}
 
 	function animate(element){
+
+		
+
 		element.addClass('placeholder_animate')
 		setTimeout(function(){
 			element.addClass('placeholder_animate2')
@@ -82,8 +124,34 @@
 		}, 200)
 	}
 
+	function setValue(euler_dropdown, value_index){
+		var id = euler_dropdown.attr('data-select')
+		var select = document.getElementById(id);
+		var option_value = $(select).children('option').eq(value_index)
+		var callback = $(select).attr('data-callback')
+		$(select).val(option_value.val())
+		$(euler_dropdown).find('.current_value').remove()
+		$(euler_dropdown).find('.front_face .content').prepend('<span class = "current_value">'+ option_value.text() + '</span>')
+		$(euler_dropdown).addClass('hasValue')
+
+		if (typeof callback !== typeof undefined && callback !== false) {
+			window[callback](option_value.val())
+		}
+		setTimeout(function(){
+			deanimate()
+		}, 200)
+		
+	}
+
+	function icon(){
+		return '<svg version="1.1" id="Chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>';
+	}
+
 	function change(elem){
 		elem.css('color', 'green')
 	}
 }( jQuery ));
 
+function hello(value){
+	console.log("hello world! the selected value is " + value)
+}

index.html

@@ -9,7 +9,11 @@
 	<script type="text/javascript" src="dropdown.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function(){
-			$('select').dropdown()
+			$('select').dropdown({
+				background: "transparent",
+				scheme: "light"
+			})
+
 		})
 		
 	</script>
@@ -18,12 +22,18 @@
 <body>
 	<div class="row">
 	<div id = "content">
-	<select data-placeholder="Select an option">
-					<option value="1">Option 1</option>
-					<option value="2">Option 2</option>
-					<option value="3">Option 2</option>
-				</select>
-		
+		<select data-callback="hello" data-placeholder="Select an option">
+			<option value="1">Option 1</option>
+			<option value="2">Option 2</option>
+			<option value="3">Option 3</option>
+		</select>
+		<div style="float:left; width:100%; margin-top:40px">
+		<select data-callback="hello" data-placeholder="Select an option">
+			<option value="1">Option 1</option>
+			<option value="2">Option 2</option>
+			<option value="3">Option 3</option>
+		</select>
+		</div>
 	</div>
 	</div>
 </body>

scss/dropdown.scss

@@ -1,7 +1,6 @@
 $bg_color: #fff;
 $placeholder_color: #000;
 $link_color: #000;
-$link_hover_color: #333;
 
 
 @mixin transition() {
@@ -17,22 +16,39 @@ transition: .4s cubic-bezier(.19,1,.22,1);
 	width:100%;
 	position:relative;
 	font-family:Inconsolata;
-	.bg {
+	
+	@include transition();
+	> .bg {
 		background:$bg_color;
 		height:0%;
 		float:left;
 		width:100%;
 		position:absolute;
-		z-index:0;
+		z-index:1;
 		@include transition();
 	}
 	.front_face{
 		position:relative;
-		z-index:2;
 		padding:20px 40px;
 		color : $placeholder_color;
 		float:left;
 		width:100%;
+		> .bg {
+			position:absolute;
+			z-index:0;
+			float:left;
+			width:100%;
+			height:100%;
+			left:0;
+			background:#e5e5e5;
+			top:0;
+		}
+		.content {
+			float:left;
+			width:100%;
+			position:relative;
+			z-index:2;
+		}
 		span {
 			@include transition();
 			float:left;
@@ -66,6 +82,9 @@ transition: .4s cubic-bezier(.19,1,.22,1);
 		@include transition();
 		transform:translateY(20px);
 		opacity:0;
+		float:left;
+		width:100%;
+
 		ul {
 			float:left;
 				width:100%;
@@ -74,27 +93,32 @@ transition: .4s cubic-bezier(.19,1,.22,1);
 				width:100%;
 				display:block;
 				a {
-					color:$link_color;
+					color:inherit;
+					opacity:0.8;
 					@include transition();
 					&:hover {
-						color:$link_hover_color;
+						opacity:1;
 					}
 				}
 			}
 		}
+	}
+	&.dark_scheme { 
+
 	}
 	&.animate {
+		height:100%!important;
 		.front_face {
 			.icon {
 				 transform: rotate(0deg) translateY(-50%);
 			}
 		}
-		.bg {
+		> .bg {
 			height:100%;
 		}
 	}
 	&.animate2{
-		.bg {
+		> .bg {
 			box-shadow:0px 11px 43px 11px rgba(0, 0, 0, 0.11);
 		}
 		.back_face {