如何制作jquery下拉菜单

作为在早些年web前端开发必备框架,jquery近年发展虽然放缓,但是功能依然强大,今年就带来一款jquery下拉菜单_免费下载,代码如下: 如何制作jquery下拉菜单_免费下载…

作为在早些年web前端开发必备框架,jquery近年发展虽然放缓,但是功能依然强大,今年就带来一款jquery下拉菜单_免费下载,代码如下:

如何制作jquery下拉菜单_免费下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>如何制作jquery下拉菜单_免费下载</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .all {
        width: 330px;
        height: 30px;
        margin: 100px auto;
        background-color: #235EA4;
        padding-left: 10px;
    }

    .all li {
        width: 100px;
        height: 30px;
        background-color: #235EA4;
        line-height: 30px;
        text-align: center;
        float: left;
        margin-right: 10px;
        display: inline;
        position: relative;
        cursor: pointer;
    }

    .all ul {
        position: absolute;
        left: 0;
        top: 30px;
        display: none;
    }
</style>

<body>
<!-- 如何制作jquery下拉菜单_免费下载 -->
    <h1 style="text-align:center;margin-top:50px">如何制作jquery下拉菜单</h1>
    <ul class="all">
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
<!-- 如何制作jquery下拉菜单_免费下载 -->


</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>

    $(function () {
        $('.all>li').hover(function (e) {
            $(this).children().stop().slideToggle()
        });
    })

</script>

jquery下拉菜单效果图:

jquery下拉菜单默认状态:

如何制作jquery下拉菜单_免费下载
如何制作jquery下拉菜单_免费下载

jquery下拉菜单触发状态状态:

如何制作jquery下拉菜单_免费下载
如何制作jquery下拉菜单_免费下载

本文转载至:点击访问

作者: huanggr

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表 1人参与