您的位置: 首页  >  IT文章  >  实例：用jQuery实现垂直和水平下拉 菜单

实例：用jQuery实现垂直和水平下拉 菜单

分类: IT文章 • 2022-08-27 09:40:59

主要是利用jQuery来实现垂直菜单和水平菜单。实现效果如图：

实例：用jQuery实现垂直和水平下拉 菜单

第一步，创建一个HTML文件，如图，包含两个ul。当然把jquery库也引入进去了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="app.css" type="text/css">
    <title>menu</title>
</head>
<body>
<!--垂直菜单-->
    <ul>
        <li class="main">
            <a href="#">菜单1</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
        <li class="main">
            <a href="#">菜单2</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
        <li class="main">
            <a href="#">菜单3</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
    </ul>
    <br/>
    <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>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
menu.html

第二步，给菜单设置样式，包括颜色，背景图片，a标签等等的样式。

ul,li{
    list-style: none;
}
ul{
    padding: 0;
    margin: 0;
}
.main,.hmain{
    background-image:url(img/1.png) ;
    background-repeat: repeat-x;
    width: 100px;
}
li{
    background-color: #cccccc;
}
a{
    text-decoration: none;
    padding-left: 20px;
    display: block;
    width: 80px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.main a,.hmain a{
    color: white;
    background-image: url("img/y.png");
    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;
}
app.css

第三步，就是利用jQuery给菜单设置响应效果了。其中，垂直菜单的原理是：当点击这个a标签时，把子菜单的display属性变为block，再次点击，更改为none。这里可以用if-else的条件判断，然后设置css（）方法，或者用hide/show/toggle，slideDown/slideUp方法。而水平菜单，用到的是hover属性，划过ul时的效果显示状态。

最后就是小图标的变化。用css修改方法即可。

$(document).ready(function(){
   $(".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();
       //ulNode.hide();
       //ulNode.toggle(3000);//数字，slow，normal，fast
       //ulNode.slideDown();
       //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.css("background-image").indexOf("y.png")>=0){
        mainNode.css("background-image","url('img/x.png')");
    }else{
        mainNode.css("background-image","url('img/y.png')");
    }
}
app.js

如需工程文件，可以留下邮箱。。

　　

相关推荐