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库冲突的完美解决办法
May 20 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery中库的引用方法
Jan 06 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现增删改查
Dec 22 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
session 的生命周期是多长
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
一些常用的Javascript函数
2006/12/22 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
大学生个人求职信
2014/06/02 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
Pygame Draw绘图函数的具体使用
2021/11/17 Python