二级菜单导航栏（左侧）「建议收藏」

全栈程序员-站长 • 2022年5月27日下午4:20 • 未分类 • 阅读 39

二级菜单导航栏（左侧）「建议收藏」目标：实现左侧的二级导航栏效果图：项目演示：点击跳转到演示地址代码：<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title>左侧导航栏</title> </head> <style> body{ margin:0; padding:0; min-width:1200px; min-he

大家好，又见面了，我是你们的朋友全栈君。

目标：

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

效果图：

项目演示：

点击跳转到演示地址

代码：

<!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来获取屏幕的高度

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/140620.html原文链接：https://javaforall.net

赞 (0)

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

基于Deep Learning 的视频识别技术「建议收藏」

上一篇 2022年5月27日下午4:00

Java类加载,getClassLoader()

下一篇 2022年5月27日下午4:20

Pycharm中调用kinect_python中的pandas库

Pycharm中调用kinect_python中的pandas库pycharm中调用pandas1.因为学习了pandas的知识点，所以就找些实例去练手。结果在pycharm中输入importpandsaspd时，pandas单词这里会被标注红色，然后根据提示，我就去settings…中去进行设置，settings->project->projectinterpreter可以看到package中没有pandas包。点击右上角的加…

全栈程序员-站长
2022年8月29日
7
【Python精华】100个Python练手小程序

【Python精华】100个Python练手小程序100 个 Python 练手小程序学习 python 的很好的资料覆盖了 python 中的每一部分可以边学习边练习更容易掌握 python 程序 1 题目有 1 2 3 4 个数字能组成多少个互不相同且无重复数字的三位数都是多少 1 程序分析可填在百位十位个位的数字都是 1 2 3 4 组成所有的排列后再去掉不满足条件的排列 2 程序源代码 fori

全栈程序员-站长
2026年3月20日
2
C语言面试题—指针篇（一）

C语言面试题—指针篇（一）原创 2017 12 22 创新教育研究中心 TeachPlus nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp C 语言面试题指针篇一指针的使用一直是 c 语言面试题中必考的部分因为指针本身使用的复杂性与普适性所以考点非常多而且也可以与其他知识相互结合因此我们将会使用五篇专题的篇幅来介绍指针分析下面的程序

全栈程序员-站长
2026年3月27日
2
谷歌离线地图开发_谷歌实时在线街景地图

谷歌离线地图开发_谷歌实时在线街景地图离线地图开发主要有两部分组成：1、获取离线地图数据；因为离线地图一般都是局域网，所以需要离线地图数据放在内网中使用；2、离线地图服务器搭建以及二次开发接口提供，离线地图是一种服务，就像我们Apache提供的WEB服务器一样，他是一种准们的地图服务：提供了包括WEB服务、TMS服务、WMTS服务等等。离线地图数据的获取：可以通过【大地图下载器】下载到。要进…

全栈程序员-站长
2026年2月3日
10
电脑开机读不到固态硬盘怎么办_电脑读不到固态硬盘怎么办

电脑开机读不到固态硬盘怎么办_电脑读不到固态硬盘怎么办电脑重启后发现电脑检测不出固态硬盘，这种情况大家不要慌张，下面就由学习啦小编跟大家分享电脑重启后读不到固态硬盘该怎么办，欢迎大家来阅读学习。电脑重启后读不到固态硬盘怎么办方法一1、首先进入BIOS后，选择“IDEHDDAutoDetection”项目，看是否可以检测到硬盘的存在，并核对型号是否一致，如果正常排除硬件问题，如果还不能找到硬盘，那么就是您的硬盘损坏或连接不正确。2、如果在bios…

全栈程序员-站长
2025年11月19日
9
没有选择上传的文件或选择的文件大小超出大小（DEDECMS亲身试验成功）

没有选择上传的文件或选择的文件大小超出大小（DEDECMS亲身试验成功）

全栈程序员-站长
2021年9月25日
45

发表回复

关注全栈程序员社区公众号