JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<h1><a href="http://dribbble.com/shots/850410-Dropdown-Menu-UI">Dropdown Menu UI</a></h1>

	  <div class="content">
		    <div id="admin">Admin Settings</div>
		    <div id="settings" class="fa fa-cog"></div>
		    <div id="menu">
			    <div id="arrow"></div>
			      <a href="#">Edit Users <i id="firstIcon" class="fa fa-user"></i></a>
			      <a href="#">Web Statistics <i id="secondIcon" class="fa fa-bar-chart-o"></i></a>
			      <a href="#">Upload Settings <i id="thirdIcon" class="fa fa-cloud-upload"></i></a>
			      <a href="#">Edit Slider <i id="fourthIcon" class="fa fa-pencil"></i></a>
  		  </div>
	  </div>

CSS

* { margin: 0; padding: 0; }

html
{
	  background: #222;
	  height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1
{
	  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  	font-size: 24px;
  	margin-top: 15px;
	  text-align: center;
}

h1 a { color: #888; text-decoration: none; }

.content
{
  	position: relative;
	  top: 30px;
	  width: 250px;
	  margin: 0px auto;
}

#admin
{
    background: #F8F8F8;
	  width: 240px;
	  height: 40px;
  	color: #888;
  	border: none;
	  border-radius: 3px;
	  padding: 0 0 0 10px;
  	font: bold 13px Helvetica, sans-serif;
  	text-transform: uppercase;
	  line-height: 40px;
	  cursor: default;
  	-webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  -o-user-select: none;
	  user-select: none;
  	margin-bottom: 7px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#settings
{
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 10px 14px 0 0;
  	border: none;
  	outline: none;
	  color: #888;
	  font-size: 20px;
	  cursor: pointer;
}

#settings:hover { color: #555; }

#menu { display: none; }

#menu a
{
	  display: block;
	  background: #F8F8F8;
	  width: 240px;
  	height: 40px;
	  padding: 0 0 0 10px;
	  font: bold 13px Helvetica, sans-serif;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: rgba(0, 0, 0, 0.4);
	  line-height: 40px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#menu a:nth-child(2)
{
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

#menu a:last-child
{
  	border-bottom-left-radius: 3px;
	  border-bottom-right-radius: 3px;
}

#menu a:hover { color: #555; }

#menu a:hover > .fa { color: #555; }

#firstIcon, #secondIcon, #thirdIcon, #fourthIcon
{
  	position: absolute;
	  margin-top: 10px;
	  right: 0;
  	font-size: 20px;
	  color: rgba(0, 0, 0, 0.4);
	  opacity: 0.7;
}

#firstIcon { margin-right: 14px; }
#secondIcon { margin-right: 11px; }
#thirdIcon { margin-right: 11px; }
#fourthIcon { margin-right: 13px; }

#arrow
{
	 ...

JavaScript

jQuery(document).ready(function($)
{
  var settings = $('#settings, #admin'),
      menu = $('#menu');

  settings.on('click', function()
  {
    menu.fadeToggle('300');
  });
});