Demo :
Html :
- Spoiler:
- làm rồi biết :> :>
Html :
- Code:
<div class="overlay"></div><!--overlay-->
<div class="nav">
<div class="wrap">
<ul class='navigation'>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Stars</a></li>
<li><a href="#">Cine</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Style</a></li>
</ul>
</div>
</div><!--menu-->
- Code:
.nav{
background-color:#1e1e1e;
height:60px;
text-align:center;
position:fixed;
width:100%;
left:0;
top:0px;
z-index:99;
}
.navigation{
display:inline-block;
}
.navigation li{
display:inline;
}
.navigation a{
display:block;
float:left;
font-family:helvetica,arial,sans-serif;
color:#fff;
font-size:12px;
height:100%;
line-height:60px;
text-transform:uppercase;
padding:0 35px;
font-weight:bold;
}
.overlay{
position:fixed;
left:0;
top:0;
height:60px;
width:100%;
background-color:transparent;
z-index:1;
}
.nav{
/*---code trước---*/
top:-60px;
-moz-transition:top 0.4s ease;
-webkit-transition:top 0.4s ease;
-o-transition:top 0.4s ease;
-ms-transition:top 0.4s ease;
transition:top 0.4s ease;
}