Created
April 22, 2012 09:49
-
-
Save sarukuku/2463128 to your computer and use it in GitHub Desktop.
Responsive black "top-fixed" menu.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"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