Hỗ trợ trực tuyến

  • (Bùi Trọng Bằng)

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    0 khách và 0 thành viên

    DANH NGÔN MỖI NGÀY

    Gốc > Code cho Blog và Web >

    Menu dạng hình ảnh cực đỉnh

    Chàocác bạn!
    Hôm nay mình xin giới thiệu một loại menu bằng hình ảnh. Phù hợp với các blog ít chuyên mục. menu này được làm dưới dạng ảnh cỡ nhỏ tầm khoảng nhỏ hơn hoặc bằng 50px và nó nên là hình vuông thì mới đẹp khi hover qua.

    Dưới đây là demo mình đã test trên máy thành công.

     

    LIVE DEMO
     

    Sau đây là code:


    <style>
    #menuimg-cia ul li{
    display:inline;
    list-style:none;
    padding: 0px 50px 0px 0px;
    border: 0px solid;
    }

    #menuimg-cia ul li img {
    width: 35px;
    height: 35px;
    box-shadow: 0px 0px 6px 1px #ee8018;
    -webkit-transition:all 1.2s ease;
    -moz-transition:all 1.1s ease;
    -moz-opacity: 0.6;
    opacity: 0.6;
    -khtml-opacity: 0.6;
    }

    #menuimg-cia ul li img:hover{
    width: 45px;
    height: 45px;
    box-shadow: 0px 0px 6px 1px red;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    transition:all 0.5s ease;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 1.5;
    }
    </style>

    <div id='menuimg-cia'>
    <ul>
    <li><a href="#" target="_blank"><img src="Home.png" title="Home"></a></li>
    <li><a href="#" target="_blank"><img src="blogger.png" title="Thủ thuật blog"></a></li>
    <li><a href="#" target="_blank"><img src="download.png" title="Download"></a></li>
    <li><a href="#" target="_blank"><img src="giaitri.png" title="Giải trí"></a></li>
    <li><a href="#" target="_blank"><img src="phim.png" title="Xem phim"></a></li>
    <li><a href="#" target="_blank"><img src="email.png" title="Liên hệ"></a></li>
    <li><a href="#" target="_blank"><img src="rss.png" title="rss"></a></li>
    </ul>
    </div>

     
    Hướng dẫn :

    Các bạn hãy thay  # thành liên kết của bạn.
    Thay link img Home.png... thành các link hình của bạn. ( nhỏ hơn hoặc bằng 50px và nên là hình vuông )
    Thay các title khi rê chuột vào hiện thị tiêu đề của hình ảnh. ( title="Home" )
    Menu chỉ hiện thì tốt nhất trên trình duyệt Chrome và Firefox
    Còn IE9 vẫn hiện thị nhưng sẽ mất đi một số tính năng hấp dẫn quan trọng mà CSS3 mang lại.
    Chúc các bạn thành công!

     



    Trọng bằng

    (Theo thietkewebdepbba.com )

     

    Nhắn tin cho tác giả
    Cao Bằng @ 23:21 14/04/2012
    Số lượt xem: 2709
    Số lượt thích: 0 người
    Avatar

    Menu dạng hình ảnh cực đỉnh

     
    Gửi ý kiến