Tạo menu ẩn hiện với CSS3

Hôm nay mình sẽ hướng dẫn các bạn tạo loại menu ngang có hiệu ứng ẩn hiện khi dê chuột, hiệu ứng hover của nó có nhiều màu khá là bắt mắt nữa. Cách làm rất đơn giản, bây giờ chúng ta cùng thực hiện nhé!
Có DEMO ngay trên trang này, bạn hãy thử đưa chuột lại vị trí trên và chân blog xem.

#Thêm menu vào blog của bạn

1. Đăng nhập Blogger
2. Bạn có hai cách để chèn cái menu này, hoặc là tạo một HTML/Javascrip mới rồi chèn code vào, hoặc là chèn code dưới vào dưới thẻ <body> - trên một số mẫu là <body expr:class='"loading" + data:blog.mobileClass'>
3. Đây là code cho bạn, chúng ta có hai code tương ứng với hai vị trí ẩn hiện
3.1 Ẩn hiện ở trên (top)

<style>
ul, li, nav
{
     border: 0pt none;
     font: inherit;
     margin: 0pt;
     padding: 0pt;
}

nav{
     display: block;
}

ol, ul {
     list-style: none outside none;
}

a{
 text-decoration:none;
}

/*---end reset---*/

.overlay{
 position:fixed;
 lefT:0;
 top:0;
 height:100px;
 width:100%;
 background-color:transparent;
 z-index:1;
}

.wrap{
    width:960px;
    margin:auto;
}

.nav{
    background-color:#1e1e1e;
    height:60px;
 text-align:center;
 position:fixed;
 width:100%;
 left:0;
 top:-60px;
 z-index:999;
 -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;
}

.overlay:hover ~ .nav,.nav:hover{
 top:0;
}

.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;
    -moz-transition:all 0.4s ease;
 -webkit-transition:all 0.4s ease;
 -o-transition:all 0.4s ease;
 -ms-transition:all 0.4s ease;
 transition:all 0.4s ease;
}

.navigation li:nth-child(1) a:hover{
 background-color:#ffa32c;
}

.navigation li:nth-child(2) a:hover{
 background-color:#73e900;
}

.navigation li:nth-child(3) a:hover{
 background-color:#992ff3;
}

.navigation li:nth-child(4) a:hover{
 background-color:#38eec5;
}

.navigation li:nth-child(5) a:hover{
 background-color:#fff000;
}

.navigation li:nth-child(6) a:hover{
 background-color:#008aff;
}

.navigation li:nth-child(7) a:hover{
 background-color:#ff0096;
}

.navigation li:nth-child(8) a:hover{
 background-color:#ff3939;
}
</style>
<div class="overlay"></div>
 <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>

3.2 Ẩn hiện ở chân (bottom)

<style>
ul, li, nav1
{
     border: 0pt none;
     font: inherit;
     margin: 0pt;
     padding: 0pt;
}

nav1{
     display: block;
}

ol, ul {
     list-style: none outside none;
}

a{
 text-decoration:none;
}

/*---end reset---*/

.overlay1{
 position:fixed;
 lefT:0;
 bottom:0;
 height:100px;
 width:100%;
 background-color:transparent;
 z-index:1;
}

.wrap1{
    width:960px;
    margin:auto;
}

.nav1{
    background-color:#1e1e1e;
    height:60px;
 text-align:center;
 position:fixed;
 width:100%;
 left:0;
 bottom:-60px;
 z-index:999;
 -moz-transition:bottom 0.4s ease;
 -webkit-transition:bottom 0.4s ease;
 -o-transition:bottom 0.4s ease;
 -ms-transition:bottom 0.4s ease;
 transition:top 0.4s ease;
}

.overlay1:hover ~ .nav1,.nav1:hover{
 bottom:0;
}

.navigation1{
 display:inline-block;
}

.navigation1 li{
    display:inline;
}

.navigation1 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;
    -moz-transition:all 0.4s ease;
 -webkit-transition:all 0.4s ease;
 -o-transition:all 0.4s ease;
 -ms-transition:all 0.4s ease;
 transition:all 0.4s ease;
}

.navigation1 li:nth-child(1) a:hover{
 background-color:#ffa32c;
}

.navigation1 li:nth-child(2) a:hover{
 background-color:#73e900;
}

.navigation1 li:nth-child(3) a:hover{
 background-color:#992ff3;
}

.navigation1 li:nth-child(4) a:hover{
 background-color:#38eec5;
}

.navigation1 li:nth-child(5) a:hover{
 background-color:#fff000;
}

.navigation1 li:nth-child(6) a:hover{
 background-color:#008aff;
}

.navigation1 li:nth-child(7) a:hover{
 background-color:#ff0096;
}

.navigation1 li:nth-child(8) a:hover{
 background-color:#ff3939;
}
</style>
<div class="overlay1"></div>
 <div class="nav1">
  <div class="wrap1">
   <ul class='navigation1'>
    <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>

4. Lưu lại và xem kết quả.

Khanh blog

Search This Blog

Tạo menu ẩn hiện với CSS3

#Thêm menu vào blog của bạn

Comments

Post a Comment