HTML，jQuery点击下拉式导航，手机导航四级栏目

最新推荐文章于 2022-11-03 20:08:37 发布
最新推荐文章于 2022-11-03 20:08:37 发布
阅读量477 收藏 5
点赞数
分类专栏： JS CSS 文章标签： html5 jquery css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42400124/article/details/116487089
版权
本文展示了如何使用HTML、jQuery和JavaScript实现一个适用于手机的四级下拉导航菜单。菜单包括多个层级，如女装、美妆和数码等，每个层级支持下拉展开和收起，具有良好的响应式设计，适配不同设备。通过点击汉堡按钮可以打开和关闭侧边栏导航，点击链接可以切换不同的导航项并高亮显示当前选中项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jquery点击下拉式四级导航，手机导航

效果图
下拉效果图
效果演示

HTML，jQuery，js手机下拉四级导航

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉式四级导航</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />

		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div class="mbwrap">
			<div class="mbheader">
				<button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
					<span class="hamb-top"></span>
					<span class="hamb-middle"></span>
					<span class="hamb-bottom"></span>
				</button>
				<a href="javascript:;" class="mblogo"><img src="img/logo.png" /></a> </div>
			<ul class="sidebar-nav">
				<li class="sidebar-brand">
					<a href="javascript:;">首页</a>
				</li>
				<li class="sidebar-brand">
					<!-- 一级 -->
					<a href="javascript:;">产品<i class="sj"></i></a>
					<ul class="sidebar-nav-two xl">
						<!-- 二级下拉 -->
						<li class="sidebar-brand-two">
							<a href="javascript:;">女装<i class="sj"></i></a>
							<!-- 三级下拉 -->
							<ul class="sidebar-nav-there xl">
								<li class="sidebar-brand-there">
									<a href="javascript:;">上衣<i class="sj"></i></a>
									<!-- 四级 -->
									<ul class="sidebar-nav-four xl">
										<li class="sidebar-brand-four">
											<a href="javascript:;">T恤</a>
											<a href="javascript:;">卫衣</a>
											<a href="javascript:;">外套</a>
										</li>
									</ul>
								</li>
								<li class="sidebar-brand-there">
									<a href="javascript:;">裙装<i class="sj"></i></a>
									<ul class="sidebar-nav-four xl">
										<li class="sidebar-brand-four">
											<a href="javascript:;">连衣裙</a>
											<a href="javascript:;">半裙</a>
											<a href="javascript:;">旗袍</a>
										</li>
									</ul>
								</li>
								<li class="sidebar-brand-there">
									<a href="javascript:;">裤装<i class="sj"></i></a>
									<ul class="sidebar-nav-four xl">
										<li class="sidebar-brand-four">
											<a href="javascript:;">休闲裤</a>
											<a href="javascript:;">牛仔裤</a>
											<a href="javascript:;">西装裤</a>
										</li>
									</ul>
								</li>
								<li class="sidebar-brand-there">
									<a href="javascript:;">套装<i class="sj"></i></a>
									<ul class="sidebar-nav-four xl">
										<li class="sidebar-brand-four">
											<a href="javascript:;">休闲套装</a>
											<a href="javascript:;">时尚套装</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="sidebar-brand-two">
							<a href="javascript:;">美妆<i class="sj"></i></a>
							<ul class="sidebar-nav-there xl">
								<li class="sidebar-brand-there">
									<a href="javascript:;" class="hidenow">彩妆</a>
									<a href="javascript:;" class="hidenow">护肤</a>
								</li>
							</ul>
						</li>
						<li class="sidebar-brand-two">
							<a href="javascript:;">数码<i class="sj"></i></a>
							<ul class="sidebar-nav-there xl">
								<li class="sidebar-brand-there">
									<a href="javascript:;">手机<i class="sj"></i></a>
									<ul class="sidebar-nav-four xl">
										<li class="downfour">
											<a href="javascript:;">华为手机</a>
											<a href="javascript:;">OPPO手机</a>
											<a href="javascript:;">苹果手机</a>
											<a href="javascript:;">小米手机</a> 
										</li>
									</ul>
								</li>
								<li class="sidebar-brand-there">
									<a href="javascript:;" class="hidenow">手机配件</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="sidebar-brand">
					<a href="javascript:;">关于我们<i class="sj"></i></a>
					<ul class="sidebar-nav-two xl">
						<li class="sidebar-brand-two">
							<a href="javascript:;">公司简介</a>
							<a href="javascript:;">联系我们</a>
							<a href="javascript:;">招商加盟</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>


	</body>
</html>

css样式

/* 下拉式四级导航 */
.hamburger{background:0 0;border:none;display:block;height:32px;margin-left:15px;position:fixed;top:20px;width:32px;z-index:999;right:0}
.hamburger:hover{outline:0}
.hamburger:focus{outline:0}
.hamburger:active{outline:0}
.hamburger.is-closed:before{-webkit-transform:translate3d(0,0,0);-webkit-transition:all .35s ease-in-out;color:#fff;content:'';display:block;font-size:14px;line-height:32px;opacity:0;text-align:center;width:100px}
.hamburger.is-closed:hover before{-webkit-transform:translate3d(-100px,0,0);-webkit-transition:all .35s ease-in-out;display:block;opacity:1}
.hamburger.is-closed:hover .hamb-top{-webkit-transition:all .35s ease-in-out;top:0}
.hamburger.is-closed:hover .hamb-bottom{-webkit-transition:all .35s ease-in-out;bottom:0}
.hamburger.is-closed .hamb-top{-webkit-transition:all .35s ease-in-out;background-color:#ddd;top:5px}
.hamburger.is-closed .hamb-middle{background-color:#ddd;margin-top:-2px;top:50%}
.hamburger.is-closed .hamb-bottom{-webkit-transition:all .35s ease-in-out;background-color:#ddd;bottom:5px}
.hamburger.is-closed .hamb-bottom,.hamburger.is-closed .hamb-middle,.hamburger.is-closed .hamb-top,.hamburger.is-open .hamb-bottom,.hamburger.is-open .hamb-middle,.hamburger.is-open .hamb-top{height:4px;left:0;position:absolute;width:100%}
.hamburger.is-open .hamb-top{-webkit-transform:rotate(45deg);-webkit-transition:-webkit-transform .2s cubic-bezier(.73,1,.28,.08);background-color:#ddd;margin-top:-2px;top:50%}
.hamburger.is-open .hamb-middle{background-color:#ddd;display:none}
.hamburger.is-open .hamb-bottom{-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform .2s cubic-bezier(.73,1,.28,.08);background-color:#ddd;margin-top:-2px;top:50%}
.hamburger.is-open:before{-webkit-transform:translate3d(0,0,0);-webkit-transition:all .35s ease-in-out;color:#ddd;content:'';display:block;font-size:14px;line-height:32px;opacity:0;text-align:center;width:100px}
.hamburger.is-open:hover before{-webkit-transform:translate3d(-100px,0,0);-webkit-transition:all .35s ease-in-out;display:block;opacity:1}
a,li,ul{list-style:none;text-decoration:none}
ul li a{font-size:16px;color:#333}
body{width:100%;height:100%;position:relative}
.sidebar-nav{width:100%;height:100%;position:fixed;top:0;right:-100%;background-color:#eee;transition:all .3s;box-sizing:border-box}
.sidebar-nav-open{right:0}
.sidebar-nav .sidebar-brand>a{font-size:18px}
.sidebar-nav .sidebar-brand .xl{display:none}
.sidebar-nav .sidebar-brand a{display:flex;display:-webkit-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-start;justify-content:flex-start;margin-bottom:20px}
.sidebar-nav .sidebar-brand a .sj{display:block;width:6px;height:6px;border-right:1px solid #ddd;border-top:1px solid #ddd;transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-left:10px}
.sidebar-nav .sidebar-brand a .sjrotate{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.activ{color:red}
.activ02{color:pink}

.mbwrap{z-index: 5;left: 0;display: block;width: 100%;position:fixed;top: 0;}
.mbheader{display: flex;width: 220px;display: -webkit-flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: center;top: 10px;left: 0;position: fixed;z-index: 1;}
.mbheader02{top: 0;padding: 10px 0;width: 100%;background-color: rgba(27,27,27,0.9);position: relative;z-index: 2;}
.mbwrap .hamburger{margin-left: 0;position: relative;top: 0;background-color: #dc2924;width: 50px;height: 50px;}
.mbheader02 .hamburger{background-color: #555555;}
.mbwrap .mblogo{width: 170px;box-sizing: border-box;padding: 0 10px;background-color: rgba(27,27,27,0.9);display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;-webkit-justify-content: center;justify-content: center;height: 50px;position: relative;z-index: 2;}
.mbwrap .mblogo img{display: block;width: auto;height: 30px;}
.mbwrap .mbheader02 .mblogo{background-color: transparent;}
.hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom{height: 2px;background-color: #fff;width: 34px;left: 8px;}
.hamburger.is-closed .hamb-top,.hamburger.is-closed:hover .hamb-top{top: 13px;}
.hamburger.is-closed .hamb-bottom,.hamburger.is-closed:hover .hamb-bottom{bottom: 13px;}
.sidebar-nav{right: inherit;left: 0;top:-100%;z-index: 0;}
.sidebar-nav-open{top: 0;padding-top: 100px;}
.sidebar-nav{background-color: #FFFFFF;}
.sidebar-nav{padding: 100px 40px 10px;overflow-y: scroll;}
a:focus, a:hover{color: #DC2924;}
.sidebar-nav .sidebar-brand .xl{padding-left: 20px;}

.sidebar-nav .sidebar-brand>a{padding-bottom: 20px;border-bottom: 1px solid #DDDDDD;text-transform: uppercase;font-size: 16px;}

.sidebar-nav .bot{/* position: absolute; */right: 0;bottom: 30px;display: flex;display: -webkit-flex;-webkit-justify-content: flex-start;justify-content: flex-start;align-items: center;-webkit-align-items: center;}
/* .sidebar-nav.sidebar-nav-open .bot{position: fixed;} */
.sidebar-nav .bot a{font-size: 14px;color: #ddd;margin-right: 30px;}

.sidebar-nav .sidebar-brand a .sj{border-color: #555555;}
/* .sidebar-nav .sidebar-brand a .sjrotate{border-color: #DC2924;} */
.sidebar-brand-two a{color: #333;}
.sidebar-brand-there a{color: #555;}
.sidebar-brand-there .sidebar-nav-four a{color: #999;}
a.activ02{color: #DC2924!important;}

jQuery代码

$(document).ready(function() {
	var trigger = $('.hamburger'),
		isClosed = false;//默认false
		
	trigger.click(function() {
		hamburger_cross(); //点击切换false/true
	});
console.log(isClosed);
	function hamburger_cross() {
		// 条件判断
		if (isClosed == true) { //当isClosed == true时
			trigger.removeClass('is-open');//移除is-open
			trigger.addClass('is-closed');//添加is-closed
			isClosed = false;//重新赋值（实现循环点击）
			$(".sidebar-nav").removeClass("sidebar-nav-open");
			$(".xl").slideUp();
			$(".sj").removeClass("sjrotate");
			$("a").removeClass("activ");
			$(".mbheader").removeClass("mbheader02");
			console.log(isClosed);
		} else {
			trigger.removeClass('is-closed');
			trigger.addClass('is-open');
			isClosed = true;
			$(".sidebar-nav").addClass("sidebar-nav-open");
			$(".mbheader").addClass("mbheader02");
			console.log(isClosed);
		}
	}

	$('[data-toggle="offcanvas"]').click(function() {
		$('#wrapper').toggleClass('toggled');
	});


	//二级下拉
	$(".sidebar-nav .sidebar-brand>a").click(function() {
		$(this).siblings(".sidebar-nav-two").slideToggle();
		$(this).children().toggleClass("sjrotate").parents(".sidebar-brand").siblings().find(".sj").removeClass(
			"sjrotate");
		$(this).parents(".sidebar-brand").siblings().find(".sidebar-nav-two").slideUp();
		$(this).parent().siblings().find(".xl").slideUp();
		$(this).toggleClass("activ").parent().siblings().find("a").removeClass("activ");
		$(this).parent().siblings().find("a").removeClass("activ02");

	});

	//三级下拉
	$(".sidebar-brand-two>a").click(function() {
		$(this).siblings(".sidebar-nav-there").slideToggle().parent().siblings().find(".sidebar-nav-there").slideUp();
		$(this).children().toggleClass("sjrotate").parents(".sidebar-brand-two").siblings().find(".sj").removeClass(
			"sjrotate");
		$(this).toggleClass("activ02").parent().siblings().find("a").removeClass("activ02");
		$(this).parent().siblings().find("a").removeClass("activ02");
		$(this).parent().siblings().find(".xl").slideUp();

	});

	//四级下拉
	$(".sidebar-brand-there>a").click(function() {
		$(this).siblings(".sidebar-nav-four").slideToggle().parent().siblings().find(".sidebar-nav-four").slideUp();
		$(this).children().toggleClass("sjrotate").parents(".sidebar-brand-there").siblings().find(".sj").removeClass(
			"sjrotate");
		$(this).toggleClass("activ02").parent().siblings().find("a").removeClass("activ02");
		$(this).parent().siblings().find("a").removeClass("activ02");
	});
});
HTML学生个人网站作业设计：基于HTML+CSS+JavaScript制作简单响应式个人博客HTML模板(8页)
专注于dreamweaver网页设计制作
08-21 348
👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J...
Web前端大作业、基于HTML+CSS+JavaScript响应式个人相册博客网站
HTML网页设计
09-25 4922
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
Jquery手机导航代码
06-17
jquery+html手机全屏代码，共享给大家
html中免费的四级联动,jQuery四级联动下拉菜单代码
weixin_34118050的博客
06-10 407
部分js代码var $town = $('#demo3 select[name="town"]');var townFormat = function(info){$town.hide().empty();if(info['code']%1e4&&info['code']<7e5){//是否为“区”且不是港澳台地区$.ajax({url:'http://passer-by.c...
jquery手机浮动导航
点一根烟 浪迹天涯
04-29 648
var bar = $("#menu_fd"); var barTop = bar.offset().top; var hiddenDiv =$('#hiddenDiv'); $(window).scroll(function() { var scrollTop = $(this).scrollTop();if (scrollTop > barTop) { hiddenDiv.css("displ
Android App开发超实用实例 | jQuery Mobile在Android手机上创建图文结合的导航按钮
不断学习，不断进步，提高自己
11-03 1242
jQuery Mobile是jQuery 在手机上和平板设备上的版本，jQuery Mobile不仅包含jQuery核心库，而且提供了一个完整统一的jQuery移动UI框架，支持全球主流的移动平台；jQuery Mobile将“写得更少、做得更多”这一理念提升到了新的层次。下面这个实例演示了使用jQuery Mobile在Android手机上创建图文结合的导航按钮。此实例在Android Studio开发环境中编写且运行在Android手机上。
下拉式导航
qq_44538193的博客
01-18 1200
**下拉式导航** 作者：李德新 撰写时间：2019年01月 18日 jquery插件是我们学习IT技术必须学会的使用的技术，所以现在我来演示一下下拉式导航的效...
基于jquery的垂直导航菜单设计与交互效果展示
我们可以得出这个压缩包包含了一个基于jquery实现的网页左侧垂直导航菜单的前端资源，这个菜单可能适用于类似TaoBaoUED这样的网站，其中使用了jQuery库来创建动态的鼠标经过变色效果，并且可能包含了前端交流和设计...
移动兼容的jQuery侧边栏多级导航菜单设计
### 知识点四：移动手机兼容性 在设计和实现多级导航菜单时，需要考虑移动设备的兼容性问题。移动设备屏幕尺寸较小，与传统PC或笔记本电脑相比，对触摸操作的适配性要求更高。为了保证用户体验，设计者通常会采用...
华为官网二级下拉菜单制作方案与栏目解析
华为官网的二级下拉导航菜单是一种交互式网站导航元素，它允许用户通过鼠标悬停或点击来展开子菜单，获取更多信息。这种菜单对于提高用户体验和网站导航效率非常有帮助，能够使得网站的布局更加清晰，同时还能节省...
jQuery html5手机导航菜单代码.zip
07-04
jQuery html5手机导航菜单代码是一款全屏自适应html5手机响应式多级点击伸缩菜单导航代码。
jQuery手机端导航分类选项卡代码
04-07
jQuery手机端导航分类选项卡代码是一款基于jQuery+HTML5实现的移动端品牌分类滑动选卡特效代码。
纯css设计鼠标感应四级导航菜单
06-15
浅绿风格四级导航菜单，鼠标经过弹出，理论上是无限级导航，自己添加。转自：http://www.zzjs.net/html/2103.html。已经用到项目里了很好用，所有和大家分享。
HTML5手机右侧滑动导航下拉菜单代码
11-24
HTML5手机右侧滑动导航下拉菜单代码，点击右侧滑出菜单栏
jQuery左侧垂直四级导航菜单特效
04-02
jQuery左侧垂直四级导航菜单特效是一款Win8风格左侧垂直四级导航菜单网页特效，采用字体图标，鼠标滑过右侧弹出二级。
虎扑首页html制作,仿虎扑首页四级导航
weixin_34981046的博客
06-15 1732
摘要：首先用html和css将此四级下拉菜单的布局分布好，多次使用‘ul’、‘li’标签，并逐层嵌，一共有四层导航条，之后再添加jQuery代码部分，首先隐藏二级、三级以及四级下拉菜单，之后当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单，并设置与之对应的当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单，之后三级菜单和四级菜单都做出类似的功能即可。完首先用html和css将此四级下拉...
jQuery二级下拉导航菜单插件适用手机端
ICode联盟
12-20 546
下载地址 一款非常时尚的jQuery和css3二级下拉导航菜单插件。该导航菜单插件中带有二级子菜单，也可以以图文方式展示或图标加文字方式组合展示，非常灵活方便。HTML结构html结构使用一个嵌套的无序列表结构。我们创建4个主要的section： 、 、 和.cd-search 。你一定想知道导航为什么不放到header中？因为我们在大屏幕上（分辨率大于1170px）使用jQuery将它放到header里面。在小屏幕设备上，它很容易作为一个单独的元素进行处理。 Search Menu Cloth
四级菜单 显示头部层级导航
业余前端的职业经历
11-30 879
1.层级的显示 情况 也是 开发工作中经常用到的 比如 我们现在在C界面 头部层级显示 A / B /C 我们在b页面的时候显示 A / B 从c界面可以跳到 B也可以跳到 A界面 但是可能有这个问题 就是 我们从B跳转到C的页面中 通过接口 获取到了 C的栏目名称 和C的id 也获取到了 他的父亲栏目名称和栏目id 但这个时候可能就疑问 那么A 怎么获...
手机html如何做导航,手机上网站导航的制作
weixin_34493203的博客
06-08 1832
为了让Web页面在手机上显示流畅，现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见，那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。如果你的导航选项比较多，放到手机上来浏览就会挤到一起，造成美观性的不足。下面为了解决这样的问题，我们就一起跟随Nick La写的教程《Mobile Navigation Desi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值