html-网站菜单-点击菜单展开相应的导航栏，加减号可切换

已于 2023-11-20 14:07:07 修改
阅读量1.8k 收藏 9
点赞数 2
分类专栏： html 文章标签： html css css3
于 2023-11-17 15:19:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/134463799
版权

一、效果图

1.点击显示菜单栏，点击x号关闭；
2.点击一级菜单，展开显示二级，并且加号变为减号；
3.点击其他一级导航，自动收起展开的导航。
在这里插入图片描述

请添加图片描述

二、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-language" content="zh-CN" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title></title>
		<script src="static/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.header {
				position: relative;
				height: 100px;
				padding: 30px;
				box-sizing: border-box;
			}

			.header .header-right {
				position: relative;
				float: right;
			}

			.header .l-toggle {
				float: left;
				width: 38px;
				height: 20px;
				cursor: pointer;
				z-index: 99;
				position: relative;
			}

			.header .l-toggle span {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				display: block;
				width: 26px;
				height: 2px;
				background-color: #000;
			}

			.header .l-toggle .line1 {
				margin: 0 auto;
				-webkit-transform: rotate(0);
				-ms-transform: rotate(0);
				transform: rotate(0);
				-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;
				transition: margin .3s .5s ease, transform .5s ease;
			}

			.header .l-toggle .line2 {
				margin: 8px auto 0;
			}

			.header .l-toggle .line3 {
				margin: 16px auto auto;
				-webkit-transform: rotate(0);
				-ms-transform: rotate(0);
				transform: rotate(0);
				-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;
				transition: margin .3s .5s ease, transform .5s ease;
			}

			.header .l-toggle.hover span {
				background: #828282;
			}

			.header .l-toggle.hover .line1 {
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				margin: 8px auto 0;
				-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;
				transition: margin .3s ease, transform .5s .3s ease;
			}

			.header .l-toggle.hover .line3 {
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
				margin: 8px auto 0;
				-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;
				transition: margin .3s ease, transform .5s .3s ease;
			}

			.header .sub-menu {
				width: 217px;
				height: auto;
				position: absolute;
				right: 30px;
				top: 20px;
				z-index: 2;
				background: rgba(255, 255, 255, 0.83);
				padding: 70px 24px 30px;
				box-sizing: border-box;
				display: none;
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			.header.active .line {
				height: 100vh;
				background: rgba(130, 130, 130, 0.3);
			}


			.header .sub-menu_ul {
				width: 100%;
				padding: 0;
			}

			.header .sub-menu_ul li {
				width: 100%;
				margin-bottom: 20px;
				font-family: Microsoft YaHei UI;
				position: relative;
				text-align: right;
				list-style: none;
			}

			.header .sub-menu_ul li .li_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 18px;
				font-weight: bold;
				color: #ABABAB;
				/* color: #333333; */
				cursor: pointer;
			}

			.header .sub-menu_ul li .li_title span {
				color: #858585;
				font-size: 20px;
				display: none;
			}

			.header .sub-menu_ul li .li_title .spanAdd {
				display: block;
			}

			.menu_li_active .spanAdd {
				display: none !important;
			}

			.menu_li_active .spanSub {
				display: block !important;
			}

			.menu_li_active a {
				color: #333 !important;
				top: -7px !important;

			}

			.header .sub-menu_ul li .li_title a {
				position: absolute;
				right: 0;
				top: -14px;
				z-index: 999;
				font-size: 18px;
				font-weight: bold;
				color: #ABABAB;
				width: 66%;
			}

			.header .sub-menu_ul li a {
				width: 100%;
				display: block;
				font-size: 14px;
				font-weight: 400;
				color: #333333;
				margin-top: 15px;
				transition: 0.5s;
				text-decoration: none;
			}

			.header .sub-menu_ul li a:hover {
				text-decoration: underline;
			}

			.header .sub-menu_ul li .li_con {
				display: none;
			}

		</style>

	</head>

	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="header-right">
				<div id="toggle" class="l-toggle">
					<span class="line1"></span>
					<span class="line2"></span>
					<span class="line3"></span>
				</div>
			</div>
			<div class="sub-menu">
				<ul class="sub-menu_ul">
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="aboutHongtian.html">走进鸿天</a>
						</div>
						<div class="li_con">
							<a href="aboutHongtian.html">关于鸿天</a>
							<a href="aboutHistory.html">发展历程</a>
							<a href="aboutCulture.html">企业文化</a>
							<a href="aboutHonors.html">荣誉资质</a>
							<a href="aboutBrand.html">企业品牌</a>
						</div>
					</li>

					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">集团业务</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">ODM供应链</a>
							<a href="savingEnvirProtection.html">品牌零售</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">技术研发</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">研发中心</a>
							<a href="savingEnvirProtection.html">印绣中心</a>
							<a href="savingEnvirProtection.html">检测中心</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">可持续发展</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">节能环保</a>
							<a href="savingEnvirProtection.html">慈善公益</a>
							<a href="savingEnvirProtection.html">校企合作</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="focusHongtian.html">聚焦鸿天</a>
						</div>
						<div class="li_con">
							<a href="focusHongtian.html">企业动态</a>
							<a href="focusHongtian.html">品牌动态</a>
							<a href="focusHongtian.html">鸿天人家</a>
							<a href="focusHongtian.html">红色党建</a>
						</div>
					</li>
					<script>
						$(function() {
							$('.sub-menu_ul li').click(function() {
								$(this).find('.li_con').slideToggle()
								$(this).siblings().find('.li_con').slideUp()

								if ($(this).hasClass('menu_li_active')) {
									$(this).removeClass('menu_li_active')
								} else {
									$(this).addClass('menu_li_active').siblings().removeClass('menu_li_active')
								}
							})
						})
					</script>
				</ul>
			</div>
		</header>

		<script>
			$(function() {
				$(".l-toggle").on('click', function() {
					var _this = $(this);
					if (!$(this).hasClass('hover')) {
						$(this).addClass('hover');
						$(this).children('.line2').stop(true, true).fadeOut(300);
						$(this).parents(".header-right").siblings('.sub-menu').stop().fadeIn();


					} else {
						$(this).removeClass('hover');
						$(".header").removeClass("active");
						$(this).children('.line2').stop(true, true).fadeIn(300);
						$(this).parents(".header-right").siblings('.sub-menu').stop().fadeOut();

					}
				});
			})
		</script>
	</body>
</html>

完成~

小跳不会Coding
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 展开 折叠,HTML实现点击展开和收起
weixin_35886636的博客
05-30 3007
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">#box,#box2,#box3,#box4{padding:10px;border:1pxsolidgreen;}//========================...
html点击收缩展开菜单栏,jquery实现可点击伸缩与展开的菜单效果代码
weixin_35452206的博客
05-30 2297
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下：这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
html实现点击按钮时下方展开一句话
最新发布
Debug yourself!
04-22 809
在这个示例中，我们首先使用 CSS 将展开内容隐藏起来，然后使用一个按钮来触发展开效果。当点击按钮时，JavaScript 函数。你可以使用 HTML、CSS 和 JavaScript 来实现点击按钮时展开一句话的效果。被调用，它会切换展开内容的显示状态（从隐藏到显示，或者从显示到隐藏）。// JavaScript 函数，切换展开内容的显示状态。你可以根据需要修改展开内容的内容和样式以及按钮的外观。/* 隐藏展开内容 *//* 样式化按钮 */
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）
lurenxie的博客
05-08 2万+
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强...
html点击展开菜单,简单实现点击可展开、关闭的CSS竖向菜单
weixin_28824127的博客
05-30 921
.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#eeeeee;width:188px;padding:2px;text-align:center;font-weight:bold;}.submenu{margin-bottom: 0.5em;}if (document.getElementById){ ///docume...
HTML+CSS+JavaScript 实现三级菜单逐级展开效果
hcc13974721431的博客
01-09 1262
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三级菜单</titl.
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
点击展开显示折叠内容
lxw1844912514的博客
08-10 2141
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /* 折叠列表*/ .Huifold .item { position: relative } .
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6127
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
HTML简单实现二级菜单栏（看了基本会）
宾有为的博客
02-22 1万+
菜单栏就是所谓的正常状态看不到二级和三级菜单，当你移鼠标到指定的位置后显示出来，因此，实现二级菜单栏只需要两行css代码就可以了。以下是未添加任何特效的效果图 1、打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码： <body> <div class="a"> <ul> <li> <a href="#"&...
软件菜单中英文对照图.pdf
06-17
【软件菜单中英文对照图.pdf】的文档详细介绍了Allegro软件的各种菜单及其对应的中文翻译，这是一款专业级的PCB设计软件。以下是对各菜单的详细解释： 1. **文件菜单**： - **新建**：创建新的设计项目。 - **...
2021-2022计算机二级等级考试试题及答案No.3035.docx
11-01
5. 运算符优先级：在表达式`4+5 \ 6* 7 / 8 Mod 9`中，根据运算符的优先级，先乘除后加减，最后是取模运算，计算结果为5。 6. 关系数据库管理系统的运算：关系数据库管理系统（RDBMS）支持的选择、投影和连接等专门...
秘奥商务管理软件-超市(网络)版V10.06
06-02
点击某个菜单即可打开一个下拉菜单，本系统的所有操作功能全部都包括在这些菜单里了，以下我们先简要地介绍一下各个菜单项都能实现哪些功能，以便您对本系统有一个大概的了解，在后面的章节中我们将分别给您详细说明...
网趣商城网站源文件
12-30
后台可批量生成优惠券号码，支持自定义金额，用户下单输入相应优惠券抵减相应订单金额，是商城不可缺少的促销手段。 系统支持图片在线上传管理功能。在更换全新编辑器的基础上，增加了“上传文件管理”进行更新，...
LvBBS 94KK美化加强版
12-27
导航栏下拉菜单显示版面列表 034.最大在线人数，最高日发帖数记录 035.支持插入代码标签 036.帖子批量管理，删除、移动 037.版面以及分类排序功能 038.回收站功能 039.管理员可以设定保留...
点击按钮，显示多条子菜单(html)
peichuangaoling的专栏
03-16 2164
单击按钮，显示多级下拉菜单                           .dropdown-submenu {             position: relative;         }         .dropdown-submenu > .dropdown-menu {             top: 0;             left:
HTML实现点击左侧菜单，右侧内容切换
u012972294的博客
12-19 5143
大概逻辑 就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过标签的顺序号进行 页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了。完整代码如上，当前页面为index.html ，需要另外建三个测试页面a.html、b.html、c.html。
点击导航栏切换内容展开二级菜单
05-05
好的，以下是展开二级菜单的操作步骤： 1. 鼠标悬停在导航栏上，找到需要展开的一级菜单。 2. 点击一级菜单，此时会展开该菜单下的二级菜单。 3. 鼠标移动到二级菜单上，即可查看二级菜单中的内容。 4. 如果需要收起二级菜单，可以再次点击一级菜单即可。 请注意，不同的网站可能会有不同的导航栏样式和展开方式。以上操作步骤仅供参考。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值