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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
市场营销专业推荐信
2013/11/03 职场文书
客服文员岗位职责
2013/11/29 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
如何写早恋检讨书
2014/09/10 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python中三种花式打印的示例详解
2022/03/19 Python