二级菜单导航栏（左侧）_big_beer

网络 02-07 5974

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

效果图：

项目演示：

点击跳转到演示地址

代码： <!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(icon/b1.png) no-repeat center; background-size: 100% 100%; } .item1_img2{ background: url(icon/b2.png) no-repeat center; background-size: 100% 100%; } .item1_img3{ background: url(icon/b3.png) no-repeat center; background-size: 100% 100%; } .item1_img4{ background: url(icon/b4.png) no-repeat center; background-size: 100% 100%; } .you{width: 30px; height: 30px; float: right; background: url(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">  <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>  <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>  <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>  <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 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 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 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 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 type="text/javascript" src="./jquery3.0.0.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来获取屏幕的高度

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签： #二级菜单导航栏左侧