jQuery实现二级导航菜单的示例


Posted in jQuery onSeptember 30, 2020

实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果。

部分效果截图:

jQuery实现二级导航菜单的示例

整体代码:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>导航菜单案例</title>  
		<style>  
			*{  
				padding: 0;  
				margin: 0;  
			}  
			ul,li{  
				list-style: none;  
			}  
			a{  
				text-decoration: none;  
			}  
			nav{  
				width: 1140px;  
				height: 40px;  
				margin: 0 auto;  
				border:solid 1px #CCC;  
				position: relative;	
  
			}  
			nav ul li{  
				width: 150px;  
				line-height: 40px;  
				float: left;  
			}  
			nav ul li a{  
				display: block;  
				width: 100%;  
				float: left;  
				color: #444;  
				font-size: 14px;  
				text-align: center;  
			}  
			nav>ul>li:hover{  
				background: #f5f5f5;  
			}  
			nav ul li ul{  
				display: none;  
				width: 150px;  
				position: absolute;  
				background-color: #f5f5f5;  
				overflow: hidden;  
				top:41px;  
			}  
			nav ul li ul li{  
				float: left;  
				border-bottom: solid 1px #CCC;  
			}  
			nav ul li ul li:last-child{  
				border: none;  
			}  
			nav>ul>li>ul>li:hover a{  
				background-color: #444;  
				color: #FFF;  
			}  
		</style>  
	</head>  
	<body>  
		<br />  
		<br />  
		<nav>  
			<ul>  
				<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 首页">首页</a></li>  
				<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 联系我们">联系我们</a></li>  
				<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 在线留言">在线留言</a></li>  
				<li>  
					<a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 新闻资讯">新闻资讯</a>  
					<ul>  
						<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 国内资讯">国内资讯</a></li>  
						<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 国内资讯">国内资讯</a></li>  
					</ul>  
				</li>  
				<li>  
					<a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 产品中心">产品中心</a>  
					<ul>  
						<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 除雪机">除雪机</a></li>  
						<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 运雪车">运雪车</a></li>  
					</ul>  
				</li>  
				<li><a href="" title=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 案例展示">案例展示</a></li>  
			</ul>  
		</nav>  
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
		<script>  
			var $li = $("nav > ul > li");  
	   	$li.mouseenter(function () {  
		$(this).children("ul").stop().slideDown();  
    	});  
    	$li.mouseleave(function () {  
     		$(this).children("ul").stop().slideUp();  
     	});	
  
		</script>  
	</body>  
</html>

以上就是jQuery实现二级导航菜单的示例的详细内容,更多关于jQuery实现二级导航菜单的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
jQuery实现带进度条的轮播图
Sep 13 #jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
You might like
php查看session内容的函数
2008/08/27 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
JavaScript 基础问答三
2008/12/03 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python实现八大排序算法(1)
2017/09/14 Python
Python求出0~100以内的所有素数
2018/01/23 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
美国家具网站:Cymax
2016/09/17 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
酒店管理求职信范文
2014/04/06 职场文书
市场营销工作计划书
2014/05/06 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015年入党决心书
2015/02/05 职场文书
改进工作作风心得体会
2016/01/23 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
golang内置函数len的小技巧
2021/07/25 Golang