Menu trượt lên xuống từ CSS3 cho blogspot

Mình sẽ giới thiệu cho các bạn 2 style:

• Style 1: Menu nằm trên đầu log và sẽ hiện ra khi ta dê chuột lên phần đầu của blog.
• Style 2: Menu nằm ở chân của blog và sẽ hiện ra khi ta dê chuột vào phần chân của blog.

 Các bạn có thể dê chuột lên đầu hoặc xuống chân blog của mình để xem demo:

☼ Style 1: Menu nằm trên đầu blog và hiện khi dê chuột.

1- Đăng nhập vào Blog
2- Vào Phần tử trang 
3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.

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

Trong đó:

• Thay dấu thăng (#)thành liên kết của bạn
• Phần màu xanh là tên của liên kết trên menu:
• Bạn có thể Download code về tại đây

- Lưu tiện ích HTML/Javarscip lại!

☼ Style 2: Menu nằm cuối blog và hiện khi dê chuột.

1- Đăng nhập vào Blog
2- Vào Phần tử trang 
3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.

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

Trong đó:

• Thay dấu thăng màu đỏ (#) thành liên kết của bạn
• Phần màu xanh là tên của liên kết trên menu:
• Bạn có thể Download code về tại đây

- Lưu tiện ích HTML/Javarscip lại!