Skip to content

Instantly share code, notes, and snippets.

@colourgarden

colourgarden/dabblet.css

Created February 3, 2012 16:02
Show Gist options
  • Save colourgarden/1730855 to your computer and use it in GitHub Desktop.
Save colourgarden/1730855 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 width transition. Animated vertical navigation.
Raw
dabblet.css
/**
* CSS3 width transition. Animated vertical navigation.
*/
body{background: #fff; min-height:100%; font-family: Helvetica, Arial, sans-serif;}
ul{width: 30%; list-style: none; margin: 0; padding: 0; background: #eee;}
a{display: inline-block; min-width: 1px; background: #000; color: #fff; text-transform: uppercase; font-size: 1.143em; margin: 0.2em 0; padding: 0.85em; transition: all 0.25s ease; text-decoration: none;}
a:hover{min-width: 80%;/*alter depending on container and padding*/}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four long</a></li>
<li><a href="">Link five</a></li>
</ul>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment