tomax · March 12, 2013 11:05
diff --git a/dabblet.css b/dabblet.css
 /**
 * Using :active state to close menu item
 */
 body {
 background: #f06;
 background: linear-gradient(45deg, #f06, yellow);
 min-height: 100%;
 position:relative;
 }

 ul li {
 	position:relative;
 	left:-48px;
 	background-color:white;
 	transition: 0.8s;
 	width: 60px;
 }

 li:hover {
 	width: 200px;
 }
 li:active {
 	width: 60px;
 	left:-200px;
 	transition: 0;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <ul>
 	<li><a href="#">some text</a></li>
 	<li><a href="#">some text</a></li>
 	<li><a href="#">some text</a></li>
 	<li><a href="#">some text</a></li>
 </ul>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Using :active state to close menu item
	*/
	body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	position:relative;
	}

	ul li {
	position:relative;
	left:-48px;
	background-color:white;
	transition: 0.8s;
	width: 60px;
	}

	li:hover {
	width: 200px;
	}
	li:active {
	width: 60px;
	left:-200px;
	transition: 0;
	}
	<!-- content to be placed inside <body>…</body> -->
	<ul>
	<li><a href="#">some text</a></li>
	<li><a href="#">some text</a></li>
	<li><a href="#">some text</a></li>
	<li><a href="#">some text</a></li>
	</ul>