横竖方向菜单，ul，li，a 焦点事件 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>JQuery实战-菜单效果</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/menu.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
    </head>
    <body>
        <ul>
            <li class="main">
                    <a href="#">菜单项1</a>
                <ul>
                    <li>
                        <a href="#">子菜单项11</a>
                    </li>
                    <li>
                        <a href="#">子菜单项12</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项2</a>
                <ul>
                    <li>
                        <a href="#">子菜单项21</a>
                    </li>
                    <li>
                        <a href="#">子菜单项22</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项3</a>
                <ul>
                    <li>
                        <a href="#">子菜单项31</a>
                    </li>
                    <li>
                        <a href="#">子菜单项32</a>
                    </li>
                </ul>
            </li>
        </ul>
        <br />
        <br />
        <br />
        <ul>
            <li class="hmain">
                    <a href="#">菜单项1</a>
                <ul>
                    <li>
                        <a href="#">子菜单项11</a>
                    </li>
                    <li>
                        <a href="#">子菜单项12</a>
                    </li>
                </ul>
            </li>
            <li class="hmain">
                <a href="#">菜单项2</a>
                <ul>
                    <li>
                        <a href="#">子菜单项21</a>
                    </li>
                    <li>
                        <a href="#">子菜单项22</a>
                    </li>
                </ul>
            </li>
            <li class="hmain">
                <a href="#">菜单项3</a>
                <ul>
                    <li>
                        <a href="#">子菜单项31</a>
                    </li>
                    <li>
                        <a href="#">子菜单项32</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
$(document).ready(function(){
    //页面中的DOM已经装载完成时，执行的代码
    $(".main > a").click(function(){
        //找到主菜单项对应的子菜单项
        var ulNode = $(this).next("ul");
        /*
        if (ulNode.css("display") == "none") {
            ulNode.css("display","block");
        } else {
            ulNode.css("display","none");
        }
        */
        //ulNode.show("slow");//normal fast
        //ulNode.hide();
        //ulNode.toggle();
        //
        //ulNode.slideDown("slow");
        //ulNode.slideUp;
        ulNode.slideToggle();
        changeIcon($(this));
    });
    $(".hmain").hover(function(){
        $(this).children("ul").slideDown();
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").slideUp();
        changeIcon($(this).children("a"));
    });
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
            mainNode.css("background-image","url('images/expanded.gif')");
        } else {
            mainNode.css("background-image","url('images/collapsed.gif')");
        }
    }
}
ul, li {
    /*清除ul和li上默认的小圆点*/
    list-style: none;
}
ul {
    /*清除子菜单的缩进值*/
    padding: 0;
    margin: 0;
}
.main, .hmain {
    background-image: url(../images/title.gif);
    background-repeat: repeat-x;
    width: 120px;
}
li {
    background-color: #EEEEEE;
}
a {
    /*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    display: block;
    display: inline-block;
    width: 100px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.main a, .hmain a {
    color: white;
    background-image: url(../images/collapsed.gif);
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a, .hmain li a {
    color: black;
    background-image: none;
}
.main ul, .hmain ul {
    display: none;
}
.hmain {
    float: left;
    margin-right: 1px;
}

 

posted @ 2012-10-30 14:04  邹晟  阅读(751)  评论(0)  编辑  收藏  举报