jQuery宽屏鼠标悬停展开下拉导航菜单代码

飞企互联

于 2023-07-20 09:28:41 发布

阅读量180

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/2301_78416267/article/details/131822748

版权


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery宽屏鼠标悬停展开下拉导航菜单代码</title>

<style>
	html,body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,form,input,textarea,th,td,select{margin:0;padding:0}
	*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
	html,body{min-height:100%}
	body{font-family:Helvetica,Pingfang SC,Microsoft YaHei,STHeiti,Verdana,Arial,Tahoma,sans-serif;font-size:14px;color:#333;background:#fff;position:relative}
	h1,h2,h3,h4,h5,h6{font-weight:normal}
	ul,ol{list-style:none}
	img{border:none;vertical-align:middle}
	a{color:#666;text-decoration:none}
	a:visited{color:#666;text-decoration:none}
	a:hover{color:#666;text-decoration:none}
	a:active{color:#666;text-decoration:none}
	table{border-collapse:collapse;table-layout:fixed}
	input,textarea{outline:none;border:none}
	textarea{resize:none;overflow:auto}
	.clearfix{zoom:1}
	.clearfix:after{content:".";width:0;height:0;visibility:hidden;display:block;clear:both;overflow:hidden}
	/* 本案例CSS*/
	header{ position: relative; z-index: 9999;border-bottom:2px solid #119f0f ; height: 100px; box-sizing: border-box;}
	.wrap{width: 1200px;margin: 0 auto;}
	#nav {display: flex;display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: wrap;}
	.logo{width: 230px;overflow: hidden;}
	.logo a{display:block;}
	.logo a img {max-width: 100%;}
	ul.nav {display: inline-flex;flex: 1;padding-left:50px;}
	li.nav-item {flex: 1;}
	li.nav-item>a{display: block;text-align: center;line-height: 100px;font-size: 16px;position: relative;}
	li.nav-item>a::before{ display: none; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent #119f0f; position: absolute;}
	li.nav-item:hover>a ,li.nav-item.active>a{color: #119f0f;}
	li.nav-item:hover>a::before,li.nav-item.active>a::before{display: block;}
	/* 二级菜单 */
	.subMenu{display: none;position: absolute;top: 100px;left: 0;width: 100%; height: 100px;background-color: #119f0f;}
	.subMenu>ul{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;}
	.subMenu>ul>li>a{display:block;padding:0 18px;text-align: center;line-height: 50px;color: #fff;}
	.subMenu>ul>li>a:hover{color:red}
</style>

</head>
<body>

<header>
    <div class="wrap">
        <nav id="nav">
            <div class="logo">
                <a href="#"><img src="images/logo-green.png" alt=""></a>
            </div>
            <ul class="nav">
                <li class="nav-item active"><a href="#" >首页</a></li>
                <li class="nav-item"><a href="https://www.flyrise.cn">智慧园区</a></li>
                <li class="nav-item">
                    <a href="#">产品中心</a>
                    <!-- 二级菜单 S-->
                    <div class="subMenu">
                        <ul class="wrap">
                            <li><a href="#">产品分类1</a></li>
                            <li><a href="#">产品分类2</a></li>
                            <li><a href="#">产品分类3</a></li>
                            <li><a href="#">产品分类4</a></li>
                            <li><a href="#">产品分类5</a></li>
                            <li><a href="#">产品分类6</a></li>
                            <li><a href="#">产品分类7</a></li>
                            <li><a href="#">产品分类8</a></li>
                        </ul>
                    </div>
                    <!-- 二级菜单 E-->
                </li>
                <li class="nav-item">
                    <a href="#">案例中心</a>
                    <!-- 二级菜单 S-->
                    <div class="subMenu">
                        <ul class="wrap">
                            <li><a href="#">案例分类1</a></li>
                            <li><a href="#">案例分类2</a></li>
                            <li><a href="#">案例分类3</a></li>
                            <li><a href="#">案例分类4</a></li>
                            <li><a href="#">案例分类5</a></li>
                            <li><a href="#">案例分类6</a></li>
                            <li><a href="#">案例分类7</a></li>
                            <li><a href="#">案例分类8</a></li>
                        </ul>
                    </div>
                    <!-- 二级菜单 E-->                    
                </li>
                <li class="nav-item"><a href="#">新闻资讯</a></li>
                <li class="nav-item"><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </div>
</header>

<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        $('ul.nav li.nav-item').hover(function(){
            $(this).children('div.subMenu').stop().slideToggle(600);
        })
    })
</script>

</body>
</html>