Bài viết này tôi hướng dẫn các bạn sử dụng css3 để trượt menu xuống khi hover vào phía trên màn hình.
Demo
Download
Bắt đầu với mã 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-->
Ở trên ta có 2 thẻ div chính : div.nav là menu và div.overlay là một thẻ ảo, tác dụng và sử dụng nó như thế nào thì ở phần dưới tôi sẽ hướng dẫn.
Mã CSS
Ta có mã css để tạo fixed menu cho thẻ div.nav.
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;
}
Ta cũng cho thẻ div.overlay position fixed đồng thời có chiều rộng và chiều cao xác định như sau:
Code
.overlay{
position:fixed;
left:0;
top:0;
height:60px;
width:100%;
background-color:transparent;
z-index:1;
}
Chú ý giá trị z-index cửa div.overlay phải nhỏ hơn của div.nav, mặt khác ta cũng set màu trong suốt cho thẻ này với background-color:transparent .
Ẩn hiện menu với CSS3
Trước tiên ta ẩn menu đi bằng cách thay đổi giá trị top của div.nav , đồng thời thêm cho nó thuộc tính transition.
Code
.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;
}
Sau đó ta sẽ ẩn hiện menu bằng css3-selector:
Code
.overlay:hover ~ .nav,.nav:hover{
top:0;
}
