jQuery练习——下拉菜单

颜颜yan_

发布于 2022-12-01 18:48:59

26.9K0

发布于 2022-12-01 18:48:59

文章被收录于专栏：颜颜yan_的学习笔记

哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。笔者还是前端的菜鸟，还请大家多多指教呀~ 欢迎大佬指正，一起学习，一起加油！第一期——下拉菜单的实现

文章目录

整体效果图

实现效果：当鼠标移到不同的一级菜单，会显示相应的二级菜单，鼠标移走，二级菜单消失。

一、HTML样式

当我们在做导航栏、少量数据表格、层级列表时，使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构，为每一个元素添加a标签，即超链接。

<body>
    <ul class="nav">
        <li class="nav-item">
            <a href="#">微博</a>

            <ul class="nav-slide">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>

        <li class="nav-item">
            <a href="#">留言板</a>
            <ul class="nav-slide">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>

        <li class="nav-item">
            <a href="#">电话</a>
            <ul class="nav-slide">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>

        <li class="nav-item">
            <a href="#">邮箱</a>
            <ul class="nav-slide">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
    </ul>

</body>

显示效果如下：

二、CSS样式

此时我们会发现，文字前面有黑色小圆点，这是ul、li自带的样式，文字有下划线，这是a标签自带的样式。先在头部标签中用link链入css，接着在css中设置样式。

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    
}

接下来使用float将竖向一级菜单变为横向，此时文字挨得非常紧，我们为盒模型设置宽度和高度，让文字分开。

接着使用text-align和padding将文字水平垂直居中。用margin调整相邻元素间的间距。

添加box-sizing属性，box-sizing属性主要用来控制元素的盒模型的解析模式，默认值是content-box，这里使用border-box，此时border-box的width和height从border算起，包含border和padding。

为一级菜单的元素添加position：relative；意为相对定位，在元素原有的位置基础上，根据设置的left调整元素位置，这样做不会改变页面布局，不影响其他元素的偏移。

使用:hover设置鼠标指针浮动在文字上面的效果，即当鼠标移入，背景颜色改变。

.nav-item {
    float: left;
    width: 90px;
    height: 70px;
    text-align: center;
    padding: 20px 20px;
    box-sizing: border-box;
    position: relative;
    margin-left: 5px;
}

.nav-item:hover {
    background-color: rgba(132, 240, 204, 0.359);
}

接下来设置二级菜单的样式，此时二级菜单相对于一级菜单向右偏移，我们使用padding-left使其对其。使用position: absolute；让二级菜单对于一级菜单来说绝对定位。

使用left、transform设置居中对齐，设置display：none；隐藏下拉菜单。

二级菜单中的li样式和一级菜单差不多。

/* 下拉列表 */
.nav-slide {
    padding-left: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70px;
    /* 下拉隐藏 */
    display: none;

}

.nav-slide li {
    float: left;
    width: 90px;
    height: 50px;
    text-align: center;
    padding: 15px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(33, 225, 161, 0.675);
}

三、jQuery代码

先引入jQuery库，接着设置script标签。添加ready函数，ready是jQuery的文档就绪函数，它用于防止在文档完全加载之前允许jQuery代

码。如果在文档没有完全加载之前就运行函数，操作可能失败。

使用选中ul和li ，为其添加鼠标移入和移出的函数，即mouseover和mouseout。接着用.children获取下拉列表中要显示的元素，也就是nav的子元素。 (this).children("ul")的意思是当前元素的子元素，this表示当前元素。

添加隐藏和显示的方法，即hide（）和show（）。

// this表示当前元素，show显示元素

    <script src="jquery-3.3.1.min.js"></script>

    <script>
        // ready是jQuery的文档就绪函数，它用于防止文档在完全加载之前允许jQuery代码，
        $(document).ready(function () {
            $(".nav li").mouseover(function () {
        // 如果在文档没有完全加载之前就运行函数，操作可能失败。
                // this表示当前元素，show显示元素
                $(this).children("ul").show();
            });
            $(".nav li").mouseout(function () {
                // hide隐藏元素
                $(this).children("ul").hide();
            });

        });
    </script>
</head>