Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created January 11, 2012 05:30
Show Gist options
  • Save anonymous/1593210 to your computer and use it in GitHub Desktop.
Save anonymous/1593210 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Slide Navigation
Raw
dabblet.css
/**
* CSS3 Slide Navigation
*/
#nav {
margin-top:50px; margin-left:50px;
font-family:Arial;
}
#nav ul{height:38px;width:450px;background:#ccc;overflow:hidden}
#nav li {float:left;background:#ddd;display:block;-webkit-transition:all 0.2s;}
#nav a{
padding:10px 20px;text-decoration:none;display:block;
background:yellow;color:#000;
}
#nav li:hover{margin-top:-40px;}
#nav .next{background:#000;color:#fff;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="nav">
<ul>
<li><a href="#">Home</a><a class="next" href="#">Home2</a></li>
<li><a href="#">Portfolio</a><a class="next" href="#">Portfolio</a></li>
<li><a href="#">About Us</a><a class="next" href="#">About Us</a></li>
<li><a href="#">Contact Us</a><a class="next" href="#">Contact Us</a></li>
</ul>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment