Droppable

Pure drop down menu

by Farzad Cyrus

HTML

<div id="root">

  <pre id="console">
Width: 100px;
Height: 20px;
Left: 300px;
Top: 300px;
</pre>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a dictum odio, eget eleifend lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget turpis porttitor nunc eleifend bibendum.
    Pellentesque quam enim, ultricies in accumsan sit amet, viverra sed eros. Etiam nec dolor maximus, hendrerit orci ac, placerat sem. Donec ut mauris et quam sodales hendrerit id et mi. Vivamus dignissim odio in iaculis dictum. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Aliquam feugiat sagittis enim non sodales. Mauris venenatis nibh elit. Fusce eu condimentum sapien, eu venenatis risus. Quisque blandit varius venenatis.
  </p>

  <p>
    Aenean a tortor turpis. Nunc luctus vel metus a blandit. Phasellus pulvinar faucibus ante non ultricies. Etiam vel congue metus. Morbi vel maximus eros. Donec lacinia massa tellus, ac rhoncus nibh hendrerit vel.

    <button id="button">
      Click Me
    </button>

  </p>

  <p>
    Sed ultricies lacus a ante pellentesque, finibus tincidunt felis sagittis. Morbi porta tempus diam, ut faucibus ex blandit quis. Mauris vitae arcu ac nibh elementum dictum vel vestibulum lorem. Duis turpis purus, imperdiet ac mi et, pellentesque feugiat
    ligula. Curabitur malesuada lacus odio, ut fringilla eros blandit in. Ut ut orci a neque mollis interdum. Maecenas bibendum mi odio, a molestie quam sagittis eu.
  </p>

  <div id="menu">
    <ul>
      <li><a href="javascript:{}">Link #1</a></li>
      <li><a href="javascript:{}">Link #2</a></li>
      <li><a href="javascript:{}">Link #3</a></li>
    </ul>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  background: #fff;
  font: 14px sans-serif;
  line-height: 2rem;
  color: #444;
}

#root {
  padding: 32px;
}

a {
  color: #dd1133;
  text-decoration: none;
}

button {
  display: inline-block;
  width: auto;
  height: 3.2rem;
  line-height: 3.2rem;
  padding: 0 1.2rem;
  float: none;
  clear: none;
  border: 0.1rem solid #555555;
  background: #666666;
  color: #fff;
  font-weight: normal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#console {
  background: #333;
  color: #fff;
  padding: 1.6rem;
}

#menu {
  box-shadow: 0 0 0.8rem 0 rgba(0, 0, 0, 0.25);
  border: 1px solid #ccc;
  background: #fff;
  z-index: 9999;
  padding: 1.6rem;
  width: 24rem;
  display: none;
}

#menu.active {
  display: block;
}

JavaScript

let Droppable = () => {
};