Hôm nay Trọng Bằng post tặng các bạn một code khá hay để các bạn làm một menu cho vào blog thêm sinh động

Demo : http://bloggiaovienthaibinh.110mb.com/menu2011/index.html

Chi tiết hơn tại địa chỉ

http://webtruonghoc.oni.cc/web/sys.php?name=News&act=showarticle&sid=19340

Code

1 .Các bạn cho code sau vào thẻ head nhé

  <script src="http://bloggiaovienthaibinh.110mb.com/menu2011/mootools.js" language="javascript"></script>  <script src="http://bloggiaovienthaibinh.110mb.com/menu2011/imageMenu.js" type="text/javascript" language="javascript"></script><script type="text/javascript">
    window.addEvent('domready', function(){
        var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:320});
    });
</script>
<style>
#kwickcontainer {
    margin:auto 0;
}
#kwick {
    /*border-bottom: 3px double #333;*/
    margin-top: 10px;
    width:1020px;
}
#kwick .kwicks {
    display: block;
    height: 100px;
    margin: 0px;
}
#kwick li {
    float: left;
    margin:0;
    padding:0;
    list-style: none;
}
#kwick .kwick {
    display: block;
    cursor: pointer;
    overflow: hidden;
    height:100px;
    width:120px;
    /*padding: 10px;*/
    background: #fff;
    /*border-right: 5px solid #202020;*/
    border-right: 0px solid #FFFFFF;
}
#kwick .kwick span {
    display:none;
}
#kwick .opt1 {
    background: url(http://bloggiaovienthaibinh.110mb.com/menu2011/1.png) ;
}
#kwick .opt2 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/2.png);
}
#kwick .opt3 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/3.png);
}
#kwick .opt4 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/4.png);
}
#kwick .opt5 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/5.png);
}
#kwick .opt6 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/6.png);
}
#kwick .opt7 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/7.png);
}
#kwick .opt8 {
    background:  url(http://bloggiaovienthaibinh.110mb.com/menu2011/8.png);
}

</style>

2.Code sau các bạn cho vào chỗ nào muốn hiện thị

<div id="kwickcontainer" align="center">
    <div id="kwick" align="center">
        <ul class="kwicks">
                            <li><a href="http://caobang83.violet.vn" class="kwick opt1"><span>Menu 1</span></a></li>
                            <li><a href="http://webtruonghoc.oni.cc" class="kwick opt2"><span>Menu 1</span></a></li>
                            <li ><a href="http://thuyphong.oni.cc" class="kwick opt3"><span>Menu 3</span></a></li>
                            <li ><a href="http://thcsthuyphong.tk" class="kwick opt4"><span>Menu 4</span></a></li>
                            <li ><a href="http://bloggiaovienthaibinh.110mb.com/tradiem/index.html" class="kwick opt5"><span>Menu 5</span></a></li>
                            <li ><a href="http://webtruonghoc.oni.cc" class="kwick opt6"><span>Menu 6</span></a></li>
                            <li ><a href="http://webtruonghoc.oni.cc" class="kwick opt7"><span>Menu 7</span></a></li>
                            <li ><a href="http://webtruonghoc.oni.cc" class="kwick opt8"><span>Menu 8</span></a></li>






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

3.Hướng dẫn

Các bạn thay các link ảnh (màu đỏ ) ở code 1 cho phù hợp chú ý kích thước ảnh lên để bằng nhau

Thay các link liên kết  ở code màu đỏ cho phù hợp

Với blog violet thì các bạn cho cả 2 code trên vào một chỗ ( thêm khối chức năng chính)

Các  bạn có thể dowload code tại đây