大家好，又见面了，我是你们的朋友全栈君。
目标：
实现左侧的二级菜单导航栏，自适应效果
效果图：
项目演示：
代码：
<!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
