Created
February 4, 2013 13:13
-
-
Save SaraSoueidan/4706665 to your computer and use it in GitHub Desktop.
A CodePen by Sara Soueidan. CSS3 Black Navigation Menu - Inspired by Dribbblr Asif Aleem's work:
http://dribbble.com/shots/757351-Navigation-Menus-PSD?list=46244-Freebies
This file contains 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
<div class="wrapper-1"> | |
<ul id="nav"> | |
<li><b class="icon-home"></b></li> | |
<li><b class="icon-picture"></b></li> | |
<li class="active"><b class="icon-facetime-video"></b></li> | |
<li><b class="icon-headphones"></b></li> | |
<li><b class="icon-user"></b></li> | |
</ul> | |
</div> | |
<div class="wrapper-2"> | |
<ul id="nav"> | |
<li class="active"><b class="icon-home"></b></li> | |
<li><b class="icon-picture"></b></li> | |
<li><b class="icon-facetime-video"></b></li> | |
<li><b class="icon-headphones"></b></li> | |
<li><b class="icon-user"></b></li> | |
</ul> | |
</div> | |
This file contains 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
/*Too bad Firefox doesn't allow cross-domain fonts*/ |
This file contains 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
*{ | |
border:0; | |
margin:0 ; | |
padding:0; | |
list-style-type:none; | |
outline:none; | |
} | |
ul{ | |
margin:0 !important; | |
} | |
html,body{ | |
height:100%; | |
} | |
body{ | |
background-color:rgb(74, 74, 74); | |
background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_net.png") repeat scroll center center rgb(74, 74, 74); | |
} | |
.wrapper-1, .wrapper-2{ | |
margin:30px auto; | |
width:412px; | |
background:linear-gradient(#3D4246,#24282B); | |
height:60px; | |
border-radius:4px; | |
border-top:1px solid #53575C; | |
border-left:1px solid #53575C; | |
box-shadow: | |
1px 1px #17191C, | |
0 0 10px #323338; | |
padding:8px; | |
padding-bottom:12px; | |
} | |
ul{ | |
width:410px; | |
height:100%; | |
border:1px solid #0F1014; | |
border-radius:3px; | |
background:#0F1014; | |
} | |
ul li { | |
float:left; | |
width:80px; | |
height:100%; | |
color:#D9D9D9; | |
text-align:center; | |
text-shadow:0 1px #0F1014; | |
display:table; | |
background: linear-gradient(#44494F,#2F3237); | |
border-radius:3px; | |
border-right:1px solid #0F1014; | |
border-bottom:1px solid #0F1014; | |
border-top:1px solid #53575C; | |
border-left:1px solid #53575C; | |
box-shadow:1px 1px #17191C; | |
cursor:pointer; | |
} | |
ul li b{ | |
margin-top:20px; | |
font-size:24px; | |
} | |
ul li:active, ul li.active{ | |
color:#171820; | |
background:#2A2D31; | |
box-shadow: | |
inset 0 0 5px 2px rgba(15, 16, 20, 0.5); | |
border:1px solid #0F1014; | |
} | |
ul li:not(.active):hover{ | |
text-shadow:1px 1px 10px Yellow; | |
} | |
.wrapper-2 ul li:not(.active):hover{ | |
text-shadow:1px 1px 10px HotPink; | |
} | |
ul li:active{ | |
text-shadow:none !important; | |
} | |
.wrapper-2 ul li { | |
color:#0F1014; | |
text-shadow:0 1px #666; | |
} | |
.wrapper-2 ul li:active, | |
.wrapper-2 ul li.active { | |
color:grey; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment