国瑞前端
当前位置: Es6 > 如何制作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下拉菜单_免费下载

本文转载至:点击访问

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(17) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

1 条评论关于"如何制作jquery下拉菜单"

最新评论

  1. 前端
    Windows 7 Chrome 77.0.3865.90

    看了一下博文,jquery下拉菜单很好理解,感谢博主

  2. 暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 108 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,677,189 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线