国瑞前端
立即登录 马上注册
当前位置: Es6 > 如何制作jquery下拉菜单

如何制作jquery下拉菜单

2019-09-28 分类：Es6 作者：huanggr 阅读（2930）

作为在早些年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下拉菜单很好理解，感谢博主

    2019-09-29 16:45 回复
    2. 暂无留言哦~~

博客简介

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

博主独立研发主题：

  • 微信小程序

    欢迎扫码关注微信小程序

    免费领取学习资料和视频

广告

最近更新

广告

广告

热门标签

精彩评论

广告

站点统计

  • 文章总数： 350 篇
  • 草稿数目： 98 篇
  • 分类数目： 34 个
  • 独立页面： 5 个
  • 评论总数： 122 条
  • 链接总数： 10 个
  • 标签总数： 118 个
  • 注册用户： 154 人
  • 访问总量： 8,950,574 次
  • 最近更新： 2022年6月26日