二级菜单导航栏（左侧）

已于 2022-06-02 01:48:07 修改
阅读量1.6w 收藏 244
点赞数 31
分类专栏： 动画效果 文章标签： js html css3 css jquery
于 2021-04-23 11:53:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/big_beer/article/details/116047779
版权

目标：

实现左侧的二级菜单导航栏，自适应效果

效果图：

在这里插入图片描述

项目演示：

点击跳转到演示地址

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左侧导航栏</title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
			min-width: 100vw;
			min-height: 100vh;
		}
		.big_box{
			display: flex;
		}
		.left_daohang{
			width: 20%;
			height: 100vh;
			min-width: 260px;/* 设置最小宽度防止文字被压缩 */
			background-color: #4b6383;
			overflow: auto;
		}
		.item1{
			width: 100%;
			height: 80px;
			line-height: 80px;
			display: flex;
			justify-content: space-between;
			cursor: pointer;
		}
		.item1:hover{
			background-color: #15305a;
		}
		.item1_text{
			font-size: 22px;
			color: white;
			overflow: hidden;/*超出隐藏*/
			text-overflow: ellipsis;/*省略号*/
			white-space: nowrap;/*设置文本不换行*/
		}
		.item1_img{
			width: 30px;
			height: 30px;
			display: inline-block;
			margin: auto 20px;
		}
		.item1_img1{
			background: url(https://static-7184a2f2-3b0b-407a-adc8-4d450f35c1e7.bspapp.com/left_dahanglan/icon/b1.png) no-repeat center;
			background-size: 100% 100%;
		}
		.item1_img2{
			background: url(https://static-7184a2f2-3b0b-407a-adc8-4d450f35c1e7.bspapp.com/left_dahanglan/icon/b2.png) no-repeat center;
			background-size: 100% 100%;
		}
		.item1_img3{
			background: url(https://static-7184a2f2-3b0b-407a-adc8-4d450f35c1e7.bspapp.com/left_dahanglan/icon/b3.png) no-repeat center;
			background-size: 100% 100%;
		}
		.item1_img4{
			background: url(https://static-7184a2f2-3b0b-407a-adc8-4d450f35c1e7.bspapp.com/left_dahanglan/icon/b4.png) no-repeat center;
			background-size: 100% 100%;
		}
		.you{width: 30px;
			height: 30px;
			float: right;
			background: url(https://static-7184a2f2-3b0b-407a-adc8-4d450f35c1e7.bspapp.com/left_dahanglan/icon/you.png) no-repeat center;
			background-size: 100% 100%;
		}
		.item1_item2{
			cursor: pointer;
			display: none;
		}
		.item2{
			margin:20px auto;
		}
		.item2:hover{
			background-color: #15305a;
		}
		.item2_text{
			font-size: 20px;
			color: white;
			margin-left: 25%;
		}
		
		.content{
			width: 80%;
			height: 100vh;
			background-color: #cccccc;
		}
	</style>
	<body>
		<div class="big_box">
			<div class="left_daohang">
				<!-- 第一块：一级标题1 -->
				<div class="item1" name='1'>
					<div class="item1_img1 item1_img"></div>
					<span class="item1_text">一级标题1111111</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2" >
					<div class="item2">
						<span class="item2_text">二级标题1</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题2</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题3</span>
					</div>
				</div>
				
				<!-- 第1.5块：临时插入无二级标题 -->
				<div class="item1">
					<div class="item1_img4 item1_img"></div>
					<span class="item1_text">一级标题1.5</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<!-- 	这部分不能删 -->
				</div>
				
			<!-- 第二块：一级标题2 -->
				<div class="item1">
					<div class="item1_img2 item1_img"></div>
					<span class="item1_text">一级标题2</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题4</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题5</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题6</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题7</span>
					</div>
				</div>
				
				<!-- 第三块：一级标题3 -->
				<div class="item1">
					<div class="item1_img3 item1_img"></div>
					<span class="item1_text">一级标题3</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题8</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题9</span>
					</div>
				</div>
				
				<!-- 第三块：一级标题3 -->
				<div class="item1">
					<div class="item1_img3 item1_img"></div>
					<span class="item1_text">一级标题3</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题8</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题9</span>
					</div>
				</div>
				
				<!-- 第三块：一级标题3 -->
				<div class="item1">
					<div class="item1_img3 item1_img"></div>
					<span class="item1_text">一级标题3</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题8</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题9</span>
					</div>
				</div>
				
				<!-- 第三块：一级标题3 -->
				<div class="item1">
					<div class="item1_img3 item1_img"></div>
					<span class="item1_text">一级标题3</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题8</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题9</span>
					</div>
				</div>
				
				<!-- 第三块：一级标题3 -->
				<div class="item1">
					<div class="item1_img3 item1_img"></div>
					<span class="item1_text">一级标题3</span>
					<div class="you item1_img"></div>
				</div>
				<div class="item1_item2">
					<div class="item2">
						<span class="item2_text">二级标题8</span>
					</div>
					<div class="item2">
						<span class="item2_text">二级标题9</span>
					</div>
				</div>
			</div>
		
			<div class="content">
			
			</div>
		</div>
	</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	
	<script>
		$(document).ready(function(){
			
			for(let i = 0 ; i<$('.item1').length ; i++){
				if($('.item1_item2')[i].children.length==0){
					$('.item1')[i].children[2].className='item1_img'
				}	
			}//遍历一级标题，如果二级标题为空则不显示图标
			
			$('.item1').click(
				function(val){
					console.log($(this).children()[1].innerText);//点击一级标题，打印点击的栏目
					$('.content').html($(this).children()[1].innerText);//在内容页显示点击的按钮文字
					if($(this).next().is(":hidden")){//如果二级导航没打开，打开它
						$(this).next().show(500);
						$(this).children('.you').css('transform','rotate(90deg)');//图片旋转90度
					}
					else if($(this).next().children().length==0){}//如果没有二级导航，没操作
					else{//如果二级导航打开了，关闭它
						$(this).next().hide(500)
						$('.you').css('transform','rotate(0deg)');//图片回到原来样子
					}	
				}
			);
			
			$('.item2').click(//点击二级标题触发事件
			     function(val){
					 console.log($(this).children()[0].innerText);
					 $('.content').html($(this).children()[0].innerText);
				 }
			)
			
		})
	</script>
</html>

说明：

1、 当屏幕缩小到一定程度，为了防止字体被压缩，变成省略号。
2、 设置最小宽度，防止页面被压缩没了。
3、左侧导航栏使用vh来获取屏幕的高度
hello big_bear
关注
  • 31
    点赞
  • 踩
  • 244
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
专栏目录
关于左侧菜单栏，点击二级菜单栏展开
alex_mmg的博客
09-13 6832
这里左侧菜单栏，跟右边的列表，详细信息，每次点击都同时刷新，每次菜单栏都闭合，所以就想了如此办法：首先一开始用的Java写的HTML标签如下，利用递归查出所有菜单 menuString.append(" "+parent.getName()+""); 在左侧菜单jsp文件里将parent.getId()获取保存起来，这里保存如下利用HTML5特性 $(document).r
精美左侧导航菜单栏
11-16
精美的左侧导航菜单，漂亮，简洁，下载直接可以展示的！！
C# winform左侧导航菜单栏（抽屉型）
04-29
C# winform左侧导航菜单栏（抽屉型），是根据button和treeview的高度变化以及显示状态做的简单导航栏，相信可以满足简单的使用，给大家做个借鉴， 写的比较粗糙，还请见谅哈~~
jQuery+HTML左侧导航栏，点击显示隐藏二级菜单
MissgirlFL的博客
01-12 1459
HTML样式代码 <div class="left"> <ul> <li class="left1">客户管理</li> <li class="left1" id="one">内部信息 <ul class="two"> <li class="left1">⭘ 通知公告</li> &l
HTML垂直二级菜单的设计与实现
最新发布
2301_77335001的博客
05-27 286
【代码】HTML垂直二级菜单的设计与实现。
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
weixin_52938153的博客
12-23 5433
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 4853
html+css+javascript+echarts设计的demo，快来学习吧
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6212
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
HTML5实现一种很常见的网页布局设计（导航栏在左侧）
热门推荐
weixin_44520259的博客
05-16 3万+
一、代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>页面布局2</title> <style type='text/css'> /*下面的星号让素有元素内外边距都为0，不留空隙*/ *{ pa...
html中左侧二级菜单栏,div+css二级弹出菜单的制作
weixin_36448411的博客
06-02 2643
div+css二级弹出菜单的制作1.效果图：当鼠标移动到左侧菜单的时候，右侧会弹出对应的二级菜单，当鼠标移开的时候，二级菜单隐藏。2.在一级菜单上新增二级菜单列表，代码如下3.预览效果如下，样式乱了，这是因为一级菜单和二级菜单重合在一起了，并没有在右侧弹出4.让二级菜单隐藏，新增如下代码5.隐藏后的效果，但仅仅隐藏和显示二级菜单还是不够的，因为现在二级菜单的位置还不对，我们期望二级菜单是在一级菜单...
Qt做导航页面左侧
u013351233的博客
05-10 2484
实现一个左侧导航界面，单独封装，按下对应的按钮，弹出对应的界面在中间区域Axure设计图：需求：按钮，中间区域跳转。
新手必看侧边二级导航栏模板（涉及浮动和定位）！！！
NanCheng_666的博客
07-18 278
HTML代码css样式代码。
左侧导航效果
08-04
左侧固定，右侧自适应，左侧导航效果
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
天猫官方网站左侧二级导航菜单
06-05
本文将详细讨论天猫官方网站左侧的二级导航菜单，这一功能强大的设计元素，以及它如何提升用户体验。 天猫是中国领先的在线购物平台，其左侧二级导航菜单是网站架构的核心组成部分。这种设计模式通常被称为“侧边栏...
左侧导航悬浮二级菜单.zip
07-04
"左侧导航悬浮二级菜单"是针对这一领域的一个实用组件，旨在提升网站的可操作性和用户友好性。这个zip文件包含了实现这种功能的jQuery代码，即`jiaoben181024`，它是一个JavaScript脚本，能够帮助开发者创建一个动态...
jquery导航栏样式鼠标悬停二级下拉菜单代码
11-19
jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码
组件首页导航栏和左侧菜单栏
09-25
在创建“组件首页导航栏和左侧菜单栏”时，我们将分别创建两个组件：`Navbar`（导航栏）和`Sidebar`（侧边栏）。 1. **创建`Navbar`组件**： 导航栏通常包含网站的主要链接，如“首页”、“关于我们”、“联系我们...
html侧边栏二级菜单
07-30
回答: 要创建一个侧边栏的二级菜单，你可以按照以下步骤进行操作。首先，在一级菜单中的每个li标签中添加一个ul标签，用于包含二级菜单的内容。然后，在ul标签中添加li标签，每个li标签代表一个二级菜单选项。在li标签中添加a标签，用于显示二级菜单的名称。最后，使用CSS来控制二级菜单的显示和隐藏。具体的代码如下所示: ``` <body> <div class="firstMenu"> <ul class="menu-one"> <li class="menu"> <a href="">学校简介</a> <ul class="menu-two"> <li><a href="">历史沿革</a></li> <li><a href="">现任领导</a></li> <li><a href="">校园风光</a></li> </ul> </li> <li class="menu"> <a href="">人才培养</a> </li> <li class="menu"> <a href="">科学研究</a> </li> <li class="menu"> <a href="">招生就业</a> </li> </ul> </div> </body> <style> ul { margin: 0px; padding: 0px; } li { list-style: none; background-color: cornflowerblue; } a { text-decoration: none; line-height: 36px; } .firstMenu { width: 100%; height: 36px; background-color: cornflowerblue; } .firstMenu .menu-one .menu { float: left; text-align: center; width: 100px; border-right: 2px solid white; } .firstMenu .menu-one .menu .menu-two { display: none; } .firstMenu .menu-one .menu:hover .menu-two { display: block; } </style> ``` 这样，你就可以在侧边栏的一级菜单中添加二级菜单，并通过CSS来控制二级菜单的显示和隐藏了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值