Usermenu

dabblet.css

/**
 * Usermenu
 */

/* demo */
* { margin:0; padding:0 }
body { background:#222; font:300 100%/1.4 proxima nova;
	color:#2e2e2e; margin:20px }
a { text-decoration:none }
nav + nav { margin-top:50px }

/* base styles */
nav > * { display:inline-block; padding:0 20px; line-height:2.6em;
	box-shadow:0 1px 1px rgba(0,0,0,.5);
	font-weight:600; border-radius:0 0 0 6px; color:#444;
	background:#d5dbdf; background:linear-gradient(bottom, #c2cbd0, #fafbfc) }
nav > a:hover { text-decoration:none; background:#e7e8e9;
	background:linear-gradient(bottom, #d0d5d8, #fcfdfe) }
nav > a:active { text-decoration:none; background:#e7e8e9;
	background:linear-gradient(bottom, #fafbfc, #c2cbd0) }

/* signed out */
nav #anonymous { border-radius:0 0 6px 0; background:rgb(62,62,62);
	background:linear-gradient(top, rgb(62,62,62) 0,rgb(38,38,38) 100%);
	margin-left:1px; box-shadow:inset 0 0 0 1px #555, 0 1px 1px rgba(0,0,0,.5);
	color:#fff; font-weight:inherit }
nav #anonymous:hover { background:#444 }
nav #anonymous:active { text-decoration:none; background:rgb(211,238,90);
	background:linear-gradient(top, rgb(48,48,48) 0,rgb(72,72,72) 100%) }

/* signed in */
nav.signed-in { font-size:14px } 
nav #user { border-radius:6px 0 0 6px }
nav #user:before { content:''; display:inline-block; width:16px; height:20px;
	background:url('http://f.cl.ly/items/3G0l3A431a05300v3x08/sprite.png') -107px -107px;
	vertical-align:middle; position:relative; left:-8px; padding-bottom:1px }
nav #options { border:none; border-radius:0 6px 6px 0; vertical-align:top;
	text-indent:-9000px; position:relative; padding:0 14px; font-size:inherit;
	height:2.6em; transition:border-radius 0 ease 120ms }
nav #options:after { content:''; width:7px; height:5px; position:absolute; top:40%; margin-left:-3px;
	background:url('http://f.cl.ly/items/3G0l3A431a05300v3x08/sprite.png') -352px -115px; transition:all 30ms }
nav #options:hover { cursor:pointer; background:#e7e8e9;
	background:linear-gradient(bottom, #d0d5d8, #fcfdfe) }
nav > a:active { text-decoration:none; background:#e7e8e9;
	background:linear-gradient(bottom, #fafbfc, #c2cbd0) }

nav menu { box-shadow:0 1px 1px rgba(0,0,0,.5); padding:6px 0;
	position:absolute; right:0; background:#ddd; border-radius:0 0 2px 2px }
nav menu a { text-indent:0; display:block; line-height:1; padding:10px 20px;
	font-weight:normal; text-align:left; color:#444 }
nav menu a:hover { background:#bbb; }

/* show/hide menu */
nav #options menu { max-height:0; overflow:hidden; transition:max-height 60ms; padding:0; }
nav #options:hover menu { max-height:100px; padding:6px 0 }
nav #options:hover { background:#ddd; border-radius:0 6px 0 0; transition:border-radius 0 }
nav #options:hover:after { transform:rotate(180deg) }

dabblet.html

<!-- if signed out -->
<nav>
	<a href="">Register</a><a id="anonymous" href="#sign-in">Sign In</a>
</nav>

<!-- if signed in -->
<nav class="signed-in">
	<a id="user" href="">Captain Nemo</a><button id="options">v
		<menu>	
			<a href="">Preferences</a>
    		<a href="#sign-out">Sign Out</a>
		</menu>
	</button>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}