Trang chủ > Thủ thuật blog > Tạo menu tab dạng sổ xuống có sử dung flash hình ảnh

Tạo menu tab dạng sổ xuống có sử dung flash hình ảnh

Có nhiều loại menu mà các blog hay các nhà lập web dã sử dụng, trong đó menu sổ xuống cũng rất thông dụng. Hôm nay mình xin giới thiệu cùng các bạn cách tạo một menu sổ dọc xuống có dùng hiệu ứng ảnh. Để bắt đầu thủ thuật các bạn cần phải làm một số việc nhỏ như sau:
– Đầu tiên các bạn download file này về. Vào đây để download file
– Sau đó giải nén ra, ta sẽ thấy 22 file ảnh, có tên tương ứng từ A –> K (mỗi lọai 2 file), và 1 file menus.htm .
– Các bạn có thể mở file menus.htm để xem offline các bản demo của các style, rồi lựa chọn style mình thích.
xem hình bên dưới

– Các style được đặt tên theo thứ tự, từ A đến K, khi bạn đã lựa chọn được file nào thì copy 2 file hình của style tương ứng, và up lên host để lấy link.
– Ví dụ ở đây mình chọn style E, khi đó mình sẽ chọn 2 file ảnh :tableftE.giftabrightE.gif để up lên host.
☼ Bây giờ chúng ta bắt đầu vào công việc chính

1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa CodeHTML
4. Chèn đọan code CSS bên dưới lên trên dòng ]]>

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url(“LINK OF tableftE.gif“) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url(“
LINK OF tabrightE.gif“) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */

#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:
100% -42px;}

Chú ý:
thay code màu tím bằng link hình mà bạn đã up, nhớ fải đúng thứ tự các file.
– Và 1 điều lưu ý nữa là : khi bạn thay đổi ảnh (tức là không sử dụng những hình ảnh mình đưa) thì bạn phải chỉnh
code màu xanh cho phù hợp với ảnh của bạn. Ở đây 42px
chính là 1/2 chiều cao của ảnh.
5. Save template lại.
6. Tiếp tục vào Bố cục
7. Tạo một Widget HTML/Javascript.
8. Chèn đọan code bên dưới vào :

<div id="tabsE“>
  • <a href="

URL Liên kết” title=”Link 1“>Link 1

  • <a href="
  • URL Liên kết” title=”Link 2“>Link 2

  • <a href="
  • URL Liên kết” title=”Link 3“>Link 3

  • <a href="
  • URL Liên kết” title=”Link 4“>Link 4


    Chú ý:
    – Thay các URL Liên kết thành liên kết của bạn
    – Thay code màu cam bằng thành tên menu của bạn.
    – Thay Code
    màu xanh là mô tả menu.
    Như vậy ta đã thực hiện xong 1 menu nằm ngang dùng hiệu ứng thay đổi ảnh.
    ☼ Nếu muốn tạo menu con cho nó ta làm như sau:
    1. Vào Bố cục – Chỉnh sửa code HTML – và dán đọan code bên dưới vào ngay bên dưới thẻ

    2.Tiếp tục tìm đến đoạn code ]]> và dán code dưới lên trên nó

    .submenu {
    background:#F57900;
    margin-top:1px;
    padding:1px;
    color: #fff;;
    margin: 1 1px;
    padding: 5px 10px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    border-top:1px #fff solid;
    cursor:pointer;
    }


    3. Save template lại.
    4. Và bây giờ bắt đầu tạo menu hòan chỉnh (ở đây mình chỉ ví dụ cho 2 menu chính và 2 menu con cho nó gọn, còn muốn nhiều hơn thì các bạn cứ thêm vào).
    – Bây giờ tạo 1 widget HTML/JavaScript và dán code bên dưới vào:


    function otab()
    {
    document.write(‘
    ‘);
    }
    function submn(submn_label,submn_text)
    {
    document.write(‘
    <td onmouseover=”this.style.background=\#039\’onmouseout=”this.style.background=\#F57900\'” class=”submenu” onclick=”window.location.href=\

    ‘http://YOURBLOG.blogspot.com/search/label/’+submn_label+’\'”>’+submn_text+”);
    }

    function ctab(){
    document.write(”);
    }
    function otab(child_id)
    {
    document.write(‘

    ‘);
    }

    <div id="tabsE“>

    • <a id="

    sub1” href=”URL liên kết” title=”Link 1“>Link 1

  • <a id="
  • sub2” href=”URL liên kết” title=”Link 2“>Link 2

    otab(“sub1_child”);
    submn(Label1‘,’Label1‘);
    submn(‘Label2‘,Label2‘);
    ctab();
    at_attach(“
    sub1“, “sub1_child”, “hover”, “y”, “pointer”);

    otab(“sub2_child”);
    submn(‘Label3‘,’Label3‘);
    submn(‘Label4‘,’Label4‘);
    ctab();
    at_attach(“sub2“, “sub2_child”, “hover”, “y”, “pointer”);

    ☼ Giải thích 1 chút về code:
    – Các code
    màu tím của menu chính và con phải hòan tòan giống nhau.
    – Các code màu cam nhạt chính là các nhãn trong của blog bạn mà bạn muốn hiển thị trên trên menu.
    – Thay dòng
    YOURBLOG.blogspot.com thành blog của bạn
    onmouseover=”this.style.background=
    #039′” : code
    màu xanh chính là màu hiển thị khi bạn rê chuột lên 1 menu con.
    onmouseout=”this.style.background=’#F57900” : code màu xanh là khi ta không rê chuột vào 1 menu con.
    – Hãy thay đổi các code màu đó theo ý bạn.
    5. Save lại, như vậy đã xong.

    Chúc bạn sẽ thành công
    Chuyên mục:Thủ thuật blog
    1. Chưa có phản hồi.
    1. No trackbacks yet.

    Gửi phản hồi

    Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

    WordPress.com Logo

    Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

    Twitter picture

    Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

    Facebook photo

    Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

    Google+ photo

    Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

    Connecting to %s

    %d bloggers like this: