jQuery垂直菜单和水平菜单实现

浏览数：23 / 时间：2015年06月09日

1 创建VerticalAndhorizontalMenu.html文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="VerticalAndhorizontalMenu.css" rel="stylesheet">
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="VerticalAndhorizontalMenu.js"></script>
    <title>垂直或水平菜单</title>
</head>
<body>
<!--垂直菜单-->
<ul>
    <li class="vmain">
        <a href="#"> 垂直菜单1</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="vmain">
        <a href="#"> 垂直菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="vmain">
        <a href="#"> 垂直菜单3</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
</ul>
<!--水平菜单-->
<br>
<br>
<ul>
    <li class="hmain">
        <a href="#"> 垂直菜单1</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#"> 垂直菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#"> 垂直菜单3</a>
        <ul>
            <li><a href="#">子菜单1</a> </li>
            <li><a href="#">子菜单2</a> </li>
        </ul>
    </li>
</ul>
</body>
</html>

2 创建VerticalAndhorizontalMenu.css文件

ul,li{
    list-style: none;
}
ul{
    padding: 0;
    margin: 0;
}
.vmain{
    width: 150px;
    background-image: url("images/toptitle.gif");
    background-repeat: no-repeat;
    margin-bottom: 2px;
}
.hmain{
    width: 150px;
    background-image: url("images/toptitle.gif");
    background-repeat: no-repeat;
    margin-right: 2px;
    float: left;
}
a{
    text-decoration: none;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 20px;
    display: block;
    width: 130px;
}
.vmain a,.hmain a{
    color: #ffffff;
    background-image: url("images/collapsed.gif");
    background-repeat: no-repeat;
    background-position: 3px center;
}
.vmain li a,.hmain li a{
    color: #000000;
    background-image: none;
    background-color: #eeeeee;
    border-bottom: 1px solid #dddddd;
}
.vmain li a:hover,.hmain li a:hover{
    background-image: url("images/linkarrow.gif");
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #006666;
    color: #fff;
}
.vmain ul,.hmain ul{
    display: none;
}

3 创建VerticalAndhorizontalMenu.js文件

$(function(){
    $(".vmain>a").click(function(){
        var ulNode=$(this).next("ul");
        /*方法一*/
        if(ulNode.css("display")=="none"){
            ulNode.css("display","block");
            /*
             或：
             ulNode.show("normal");//数字（毫秒）,fast,slow、normal和fast
             或：
             ulNode.slideDown();
             */
        }
        else{
            ulNode.css("display","none");
            /*
             或：
             ulNode.hide("normal");
             或：
             ulNode.slideUp();
             */
        }
        /*
         或方法二：
         ulNode.toggle("normal");//数字（毫秒）,fast,slow、normal和fast
         或方法三：
         ulNode.slideToggle();
         */
    });
    $(".hmain").hover(function(){
        $(this).children("ul").slideDown("normal");
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").slideUp("normal");
        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‘)");
        }
    }
}

4、运行效果如下