利用html+css+jquery编写导航栏下拉菜单

1、内容案例介绍，主要是利用html,css,jquery实现导航栏内容下拉菜单，导航栏分类为首页，新闻，图片，视频，论坛。

　　新闻，图片，视频进行下拉菜单设置。案例代码如下

2、html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="导航栏下拉菜单.css">
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="导航栏下拉菜单.js"></script>
</head>
<body>
<div class="container">
    <div class="nav_bar clearfix">
        <ul class="nav_list">
            <li class="nav_item">
                <a href="">首页</a>
            </li>
            <li class="nav_item news">
                <a href="">新闻</a>
                <div class="drop_down_list news_list">
                    <ul>
                        <li><a href="">最新快报</a></li>
                        <li><a href="">娱乐新闻</a></li>
                        <li><a href="">国外新闻</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav_item picture">
                <a href="">图片</a>
                <div class="drop_down_list picture_list">
                    <ul>
                        <li><a href="">动漫图片</a></li>
                        <li><a href="">美景图片</a></li>
                        <li><a href="">汽车图片</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav_item video">
                <a href="">视频</a>
                <div class="drop_down_list video_list">
                    <ul>
                        <li><a href="">电影</a></li>
                        <li><a href="">动漫</a></li>
                        <li><a href="">搞笑</a></li>
                    </ul>
                </div>
            </li>
            <li class="nav_item">
                <a href="">论坛</a>
            </li>
        </ul>
    </div>
    <div class="show_list">
    </div>
</div>
</body>
</html>

2、css代码：

*{
    margin: 0;
    padding: 0;
}

.container{
    margin: auto;
    width: 1296px;
}

li{
    list-style-type: none;
}

.nav_bar .nav_list .nav_item{
    background-color: orange;
    float: left;
    height: 35px;
}

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

.nav_bar .nav_list{
    width: 500px;
    margin: auto;
}

a{
    text-decoration: none;
}

/*对导航栏里面的a标签进行设置*/
.nav_bar .nav_list .nav_item a{
    width: 100px;
    height: 35px;
    display: block;
    text-align: center;
    line-height: 35px;
    color: #000;
}

/*导航栏下拉菜单隐藏设置*/
.drop_down_list{
    display: none;
    position: relative;
    z-index: 100;
    background-color: rosybrown;
}

.show_list{
    height: 100px;
    background-color: green;
    margin-top: 10px;
}

3、jquery代码：

$(function nav_bar() {
    // 设置导航栏和下拉菜单a标签滑动背景颜色为红色
    $('.nav_bar .nav_list .nav_item a').mouseenter(function () {
        $(this).css('backgroundColor', 'red');
    });

    // 导航栏滑动过会恢复初始背景颜色
    $('.nav_bar .nav_list .nav_item a').mouseleave(function () {
        $(this).css('backgroundColor', 'orange');
    });

    // 下拉菜单列表内容滑动过会恢复初始背景颜色
    $('.nav_bar .nav_list .nav_item .drop_down_list a').mouseleave(function () {
        $(this).css('backgroundColor', 'rosybrown');
    });

    // 下面是对导航栏新闻,图片,视频隐藏下拉菜单下滑显示
    $('.nav_bar .nav_list .news').mouseenter(function () {
        $('.news_list').stop().slideDown()
    });

    $('.nav_bar .nav_list .news').mouseleave(function () {
        $('.news_list').stop().slideUp()
    });

    $('.nav_bar .nav_list .picture').mouseenter(function () {
        $('.picture_list').stop().slideDown()
    });

    $('.nav_bar .nav_list .picture').mouseleave(function () {
        $('.picture_list').stop().slideUp()
    });

    $('.nav_bar .nav_list .video').mouseenter(function () {
        $('.video_list').stop().slideDown()
    });

    $('.nav_bar .nav_list .video').mouseleave(function () {
        $('.video_list').stop().slideUp()
    });
});

注：

　　1）在设置下拉菜单的时候要对导航栏里面的li（类:nav_item）设置高度，如果利用内容填充高度，会对下面的排版内容进行往下挤压，不会实现z-index压盖效果。

　　2）jquery 滑动背景颜色修改和下拉菜单使用了mouseenter()/mouseleave()事件

　　　　mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件

　　　　mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件

　　3）下拉菜单在使用slideDown()/slideUp()。前面要添加stop()。stop()含义停止

　　　　slideDown()：通过使用滑动效果，显示隐藏的被选元素。括号里面可以添加时间，多少时间后显示隐藏的元素

　　　　slideUp()：通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。括号里面可以添加时间，多少时间后隐藏的元素

posted @ 2020-10-22 17:30 点点滴滴的努力阅读(721) 评论(0) 收藏举报

刷新页面返回顶部