Thư viện

Trải nghiệm

Thứ Bảy, tháng 11 10, 2012

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

hướng dẫn các bạn cách tạo một menu ngang với hiệu ứng thay đổi khi dê chuột qua mỗi một sub menu Thêm nữa menu này chỉ hiện ra khi dê chuột lên đầu trang.

Chia sẻ:
Theo yêu cầu bạn chjpsea namkna sẽ hướng dẫn các bạn cách tạo một menu ngang với hiệu ứng thay đổi khi dê chuột qua mỗi một sub menu Thêm nữa menu này chỉ hiện ra khi dê chuột lên đầu trang.
Ảnh minh họa:
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!




32 nhận xét:

  1. tuyệt vời .hay quá anh ơi .hehee
    1 liker fc
    1 share tweet nhé :)

    Trả lờiXóa
  2. nếu mình muốn thanh menu lập ngược lại bên dưới khi rê chuột xuống thì chỉnh sao namkna :)

    Trả lờiXóa
  3. @chjpsea Sửa tất cả thuộc tính top thành bottom. Trong bài viết đã cập nhật rùi đó.

    Trả lờiXóa
  4. @Fairstarok a và cách chỉnh khoảng cách di chuyển chuột là thsnh menu xuất hiện chổ nào a nhỉ .e mò hoài k dc :(

    Trả lờiXóa
  5. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  6. có thời gian bác làm cái demo cho anh em xem nhé .
    :5)

    Trả lờiXóa
  7. @Ngọc NhiDemo ngay trong bài viết này đó thôi.
    bạn có thể dê chuột lên đầu hoặc xuống chân blog của mình để xem demo:

    Trả lờiXóa
  8. sau mình làm được phần đầu blog còn phân chân thì lại không hiện được nhỉ?




    Trả lờiXóa
  9. bạn có thể cho mình code hoàn chỉnh trong chính cái bài demo này được không?

    Trả lờiXóa
    Trả lời
    1. Chính là code trong bài viết này đó bạn ak.

      Xóa
  10. mình không thể làm cho hiện cả ở trên và dưới được, bạn có thể share code cho mình được không?, rất cảm ơn bạn

    Trả lờiXóa
  11. Nam ơi bạn có thể giúp mình sửa lại kích thước của bài viết đc k ạ
    demo : http://share68.blogspot.com/2013/07/internet-download-manager-616-crack-idm-bang-host-moi-nhat-2013.html

    giúp mình làm cho thân bài viết nó sát vào mấy cái tiêu điểm ý

    Trả lờiXóa
    Trả lời
    1. Mình đã sửa template và gửi vào mail bạn rùi đó thôi.

      Bạn chỉnh lại phần : width:548px trong đoạn code sau:

      .post-view{padding:3px 8px 8px;width:548px;border:solid 1px #d1d1d1;background:#fff;line-height:1.5em}


      và cả đoạn:

      .bread{padding:3px 8px;width:548px;border:solid 1px #d1d1d1;background:#f4f4f4;line-height:1.5em;margin-bottom:5px}

      Xóa
  12. anh Nam oi em làm đầu trang đươc nhưng cuối trang làm mãi ko được, anh vào xem giúp em nha vpbank01.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Em gửi tem vào tavannam01@gmail.com anh thêm cho.

      Xóa
  13. em gửi rồi anh check mail nhé

    Trả lờiXóa
  14. Anh Nam chỉ em làm drop menu này với, drop menu kiểu nam cuối blog đó cho nó hiện drop lên bên trên, em thích kiểu menu này nên ko muốn đổi ^^!

    Trả lờiXóa
    Trả lời
    1. Mấy hôm nay bận quá để vài hôm nữa rảnh anh viết cho nha,

      Xóa
    2. cảm ơn anh trước ^.^

      Xóa
  15. em có thể tích hợp ô tìm kiếm vào đây kô
    ?

    Trả lờiXóa
  16. Tấy nhiên là được em ak.
    Em chỉ cần dán code khung tìm kiếm trước đoạn:

    </ul>
    </div>
    </div>

    Trả lờiXóa
  17. Anh Nam ơi, anh rảnh chưa hướng dẫn em làm drop menu lên đi anh

    Trả lờiXóa
    Trả lời
    1. Anh namkna cho em hỏi tí. Sao khi blog của em chạy trên firefox thì độ rộng full màn hình còn chạy trên Chrome thì độ rộng nó bị thu hẹp vậy anh. Em dùng Responsive Blogger Templates của bác Duy

      Xóa
  18. Đoạn này bạn để có 990 nên tùy trình duyệt độ rộng sẽ khác nhau:

    @media only screen and (max-width:1024px){
    #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}
    #content-wrapper{padding:15px 0 0 0}}

    hãy cho nó về 1024 để thích hợp với màn hình 4x3 còn 16x9 thì phải chỉnh lại hết nha,

    @media only screen and (max-width:1024px){
    #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{padding:0 0;width:1024px}
    #content-wrapper{padding:15px 0 0 0}}

    Trả lờiXóa
  19. Nam ơi, mình hỏi chút. Nếu mình muốn cái menu luôn hiển thị kể cả khi kéo xuống như menu màu xanh lá cây của cậu thì sửa như thế nào, hay code nào vậy. Chia sẻ mình với nhé, mình cảm ơn !

    Trả lờiXóa