Skip to content

Instantly share code, notes, and snippets.

@sarukuku

sarukuku/dabblet.css

Created April 22, 2012 09:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sarukuku/2463128 to your computer and use it in GitHub Desktop.
Save sarukuku/2463128 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive black "top-fixed" menu.
Raw
dabblet.css
/**
* Responsive black "top-fixed" menu.
*/
@import url("http://fonts.googleapis.com/css?family=Oswald");
@import url("http://img.js-design.org/js-design.org/icons/icons.css");
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 10px;
padding: 0;
color: white;
}
.navigation-bg-fixer {
display: block;
width: 100%;
height: 40px;
background-image: url("http://subtlepatterns.com/patterns/black_denim.png");
}
ul.top-navigation {
postion: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
min-height: 40px;
background-image: url("http://subtlepatterns.com/patterns/black_denim.png");
}
ul.top-navigation {
list-style-type: none;
margin: 0 auto;
padding: 0;
max-width: 1024px;
}
ul.top-navigation li {
display: inline;
width: 100%;
}
ul.top-navigation li a {
display: inline-block;
color: white;
text-decoration: none;
text-transform: lowercase;
font-family: Arial;
text-align: center;
padding: 0 15px 2px 5px;
transition: all 0.1s ease-in-out;
position: relative;
top: -3px;
font-family: Oswald, Arial;
text-shadow: 0px 1px 1px #9F9F9F;
color: white;
}
ul.top-navigation li a:hover {
color: orange;
}
ul.top-navigation li a.current {
color: orange;
}
ul.top-navigation li a.current:hover {
color: white;
}
.top-5px {
top: 5px;
}
.top-6px {
top: 6px;
}
.top-7px {
top: 7px;
}
.top-8px {
top: 8px;
}
.top-9px {
top: 9px;
}
.top-10px {
top: 10px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="navigation-bg-fixer">
<ul class="top-navigation">
<li>
<a href="#" class="current"><span class="Home top-5px"></span>Home</a>
</li>
<li>
<a href="#"><span class="Sound top-8px"></span>Blog</a>
</li>
<li>
<a href="#"><span class="Lightbulb top-8px"></span>Projects</a>
</li>
<li>
<a href="#"><span class="Favorites top-9px"></span>Portfolio</a>
</li>
<li>
<a href="#"><span class="VoIP top-5px"></span>Contact</a>
</li>
</ul>
</div>
Raw
settings.json
{"view":"separate","fontsize":"90","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment