shuchengliang
11/14/2012 - 4:09 PM

A CodePen by Sara Soueidan. CSS3 Black Navigation Menu - Inspired by Dribbblr Asif Aleem's work: http://dribbble.com/shots/757351-Navigation

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

style.css
content_copyfile_download

*{
  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;
  }
script.js
content_copyfile_download
/*Too bad Firefox doesn't allow cross-domain fonts*/
index.html
content_copyfile_download

<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>