Menu Đẹp Hiệu Ứng Cho Blog/Web

Download

1. Tới trang bố trí blogger của bạn
2. Nhấp vào Thêm tiện ích và chọn HTML / JavaScript.
3. Bây giờ dán đoạn mã sau vào nó.

<style type="text/css">
    #container_Ver_3
    {
        _overflow: visible;
    }
    
    ul
    {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    #nav_Ver_3
    {
        width: 330px;
        float: left;
        overflow: visible;
    }
    #navList li
    {
        list-style: none;
        margin: 0 0 10px 0;
        position: relative;
        float: left;
    }
    #navList a
    {
        text-decoration: none;
        color: #ffffff;
        font-size: 15px;
        background-image: url(http://jc-designs.net/demo/images/navBack.jpg);
        background-repeat: repeat-y;
        padding: 5px;
        border: 1px #4f9bd9 solid;
        -webkit-box-shadow: 3px 3px 5px #283958;
        -moz-box-shadow: 3px 3px 5px #283958;
        box-shadow: 3px 3px 5px #283958;
        display: block;
        width: 250px;
    }
    #navList a:hover
    {
        background-image: url(http://jc-designs.net/demo/images/navHover.jpg);
        color: #8FC3EA;
    }
    #navList ul, #navList ul ul
    {
        display: none;
        position: absolute;
        top: 0;
        left: 280px;
        background-image: url(http://jc-designs.net/demo/images/navHover.jpg);
        background-repeat: repeat-y;
        border: 1px #4f9bd9 solid;
        -webkit-box-shadow: 3px 3px 5px #283958;
        -moz-box-shadow: 3px 3px 5px #283958;
        box-shadow: 3px 3px 5px #283958;
    }
    .listTab
    {
        z-index: 100;
    }
    #navList .listTab li
    {
        margin: 0 0 0 0;
    }
    #navList .listTab a, #navList .listTab a:hover
    {
        background-image: none;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        width: 250px;
    }
    #navList .listTab a
    {
        padding: 5px 5px 5px 10px;
    }
    #navList li:hover ul ul, #navList li:hover ul ul ul, #navList li:hover ul ul ul ul
    {
        display: none;
    }
    #navList li:hover ul, #navList li li:hover ul, #navList li li li:hover ul, #navList li li li li:hover ul
    {
        display: block;
    }
</style>
<script language="javascript" type="text/javascript">
    $(function () {
        $('#navList ul').css({ display: "none" }); //Fix Opera

        $('#navList li').hover(function () {
            $(this).find('a').stop().animate({ 'width': "280" });
            $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);

        }, function () {
            $(this).find('ul:first').css({ visibility: "hidden" }).hide(400);
            $(this).find('a').stop().animate({ 'width': "250" });
        });
    });
</script>

<div id="container_Ver_3">
<div id="nav_Ver_3">
<ul id="navList">            
<li><a href="http://www.vietcons.info/2012/07/yeah1.html"
style="width: 250px; overflow: hidden;" title="Xem Tivi Online">Xem Tivi Online</a></li>            
<li><a href="http://www.vietcons.info/p/xem-huong-xay-nha.html"
style="width: 250px; overflow: hidden;" title="Xem Hướng Xây Nhà">Xem Hướng Xây Nhà</a></li>
<li><a href='http://www.vietcons.info/2013/03/ketquaxoso.html'
style="width: 250px; overflow: hidden;" title="Kết Quả Xổ Số"> Kết Quả Xổ Số</a></li>
</ul>
</div>
</div>

4.Các bạn nhớ chỉnh sửa cho phù hợp theo Blog mình nhé.
5.Lưu Lại và chúc bạn thành công.