<h1>Dropy</h1>
<h2>A Simple SCSS & jQuery dropdown</h2>

<main>
  <p><a href="https://codepen.io/Tombek/pen/OPvpLe" target="_blank">I've made a new version of Dropy !</a></p>
</main>

<dl class="dropdown">
	<dt><a><span>Dropdown n°1</span></a></dt>
		<dd>
			<ul>
				<li><a class="default">Dropdown n°1</a></li>
				<li><a>Option n°1</a></li>
				<li><a>Option n°2</a></li>
				<li><a>Option n°3</a></li>
			</ul>
		</dd>
</dl>

<dl class="dropdown">
	<dt><a><span>Dropdown n°2</span></a></dt>
		<dd>
			<ul>
				<li><a class="default">Dropdown n°2</a></li>
				<li><a>Option n°1</a></li>
				<li><a>Option n°2</a></li>
				<li><a>Option n°3</a></li>
				<li><a>Option n°4</a></li>
				<li><a>Option n°5</a></li>
				<li><a>Option n°6</a></li>
			</ul>
		</dd>
</dl>

<dl class="dropdown">
	<dt><a><span>Dropdown n°3</span></a></dt>
		<dd>
			<ul>
				<li><a class="default">Dropdown n°3</a></li>
				<li><a>Option n°1</a></li>
				<li><a>Option n°2</a></li>
			</ul>
		</dd>
</dl>

@import "compass/css3";

/* Variables */
$width: 15em; // dropdown width
$height: 2.5em; // dropdown height
$ajust: 1em; // left & right padding in dropdown menu
$radius: 3px;

/* Colors */
$black: #4d4d4d;
$grey: #ecf0f1;
$dark-grey: #bdc3c7;
$green: #2ecc71;


/* Common style */
*{ box-sizing: border-box; }

body{
  font-family: 'Open Sans', sans-serif;
  color: $black;
}

h1{
  font-family: 'Playball', cursive;
  font-size: 6em;
  font-weight: 700;
  text-align: center;
  color: $green;
  
  margin: 0.25em 0; // Cosmetic value
}

h2{
  font-style: italic;
  text-align: center;
  
  margin-bottom: 2em; // Cosmetic value
}

main{
  background: #333;
  width: 100%;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
  font-style: italic;
  
  a{
    color: #e75854;
    text-decoration: none;
    transition: color 250ms ease-in-out;
    
    &:hover{ color: #fafafa; }
  }
}

/* Dropdown style */
.dropdown{
	width: $width;
  margin: 0 auto;
  
  margin-bottom: 1em; // Cosmetic value

	dt{
		a {
			display: block;
      height: $height;
      width: 100%;
      
			border: 1px solid $grey;
			border-radius: $radius;
			text-decoration: none;

			&:hover, &:active{
				border-color: $dark-grey;
			}
		}

		span{
      display: block;
			padding: 0 $ajust;
      
      line-height: $height;
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHo+AACAQQAA+MoAAIC0AAB48QAA9RwAADw3AAAbzhlfIT4AAACJSURBVHjajNAxCsJAEEbhb5cU4i0sbHIaL6IQTxFPo4VeROwXQs4gKW1cWJZEM90wj5l5f0jDeMXBunqENIw7vLD9A09oIxL6FdsvSCENI2zwxH4BTmgxxeJc92P76cuIpRBuc6K45yZWwzPeleixBOLMr30tWgJZuqwcQJNFy2GzkHeHUMPwGQChFSPmzlJ1WgAAAABJRU5ErkJggg==) no-repeat scroll right center;
			border-right: $ajust solid transparent;
      cursor: pointer;
		}
	}
  
	dd {
		position: relative;

		ul {
      display: none;
      position: absolute;
      left: 0;
			top: -$height;
      width: 100%;
      
      list-style: none;
			background: #fff none repeat scroll 0 0;
			border: 1px solid $dark-grey;
			border-radius: $radius;
      
      li:first-child a:hover{
        border-radius: $radius $radius 0 0;
      }
      
      li:last-child a:hover{
        border-radius: 0 0 $radius $radius;
      }
		}
    
		li a {
      display: block;
			padding: 0 $ajust;
			
			line-height: $height;
      text-decoration: none;

			&:hover{
				background-color: $green;
				color: #fff;
				cursor: pointer;
			}
		}
	}
}

.selected{
	font-weight: 700;
}

var dropdowns = $(".dropdown");

// Onclick on a dropdown, toggle visibility
dropdowns.find("dt").click(function(){
	dropdowns.find("dd ul").hide();
	$(this).next().children().toggle();
});

// Clic handler for dropdown
dropdowns.find("dd ul li a").click(function(){
	var leSpan = $(this).parents(".dropdown").find("dt a span");
  
	// Remove selected class
	$(this).parents(".dropdown").find('dd a').each(function(){
    $(this).removeClass('selected');
  });
  
	// Update selected value
	leSpan.html($(this).html());
  
	// If back to default, remove selected class else addclass on right element
	if($(this).hasClass('default')){
    leSpan.removeClass('selected')
  }
	else{
		leSpan.addClass('selected');
		$(this).addClass('selected');
	}
  
	// Close dropdown
	$(this).parents("ul").hide();
});

// Close all dropdown onclick on another element
$(document).bind('click', function(e){
	if (! $(e.target).parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});