CSS drawer

dabblet.css

/* CSS drawer */
@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
* { font:400 1em/1.6em Source Sans Pro,sans-serif; margin:0; padding:0 }

/* skin */
html { background:#666 }
body { background:#fff; border-radius:.3em; box-shadow:0 0 30px 10px rgba(0,0,0,.3) }
button{ border:1px solid #e6e6e6; border-radius:.3em; background:#fff;
  text-align:center; margin:.3em 0; font-weight:600; color:#3c3c3c; cursor:pointer }
  button:hover, button:active { border-color:#d2d2d2; color:#202020 }
  button:active { background:linear-gradient(top, #f0f0f0, #fff) }
button[menu]:after { content:'»'; padding-left:.6em }
menu { background:#f6f6f6;
	box-shadow:inset 0 1px 3px rgba(0,0,0,.3), inset 0 -1px 3px rgba(0,0,0,.1) }

/* rhythm and layout */
body { max-width:35em; margin:auto; padding:1em }
h1 { font-size:1.6em }
p { margin:1em 0 }
button { line-height:2.36em; padding:0 1.6em; font-size:.6875em }
menu { margin:0 -1em; padding:0 1em }

/* interaction */
menu#more { max-height:0; overflow:hidden; transition:max-height 2s 1s cubic-bezier(0,.3,1,-.1) }
button[menu]:active ~ menu#more, menu#more:hover { max-height:6em; transition:max-height 1ms }

dabblet.html

<h1>CSS drawer</h1>

<p>The dropdown pattern should be either a native 
<code>&lt;select&gt;</code> —and ugly— or behave like an accordion/drawer
pattern to avoid horrible mobile usability.</p>

<button name=preview>Preview</button>
<button name=download>Download</button>
<button menu=more>More</button>
<menu id=more>
   <button name=copy>Copy</button>
   <button name=duplicate>Duplicate</button>

   <button name=checkin>Check-in</button>
   <button name=checkout>Check-out</button>

   <button name=enclose>Create New Containing Folder</button>
   <button name=link>Copy Link to Document</button>

   <button name=delete>Delete</button>
</menu>

<p>I took the liberty to change how the interaction itself works.
It should need no explanation, but be warned that it is on purpose.

<p>One more thing: The CSS here is not robust, bug-free or even
immediately re-usable. Applying copypasta here could result in 
your website being probably broken. Study the code.

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}