二级菜单导航栏（左侧） |
您所在的位置：网站首页 › html点击展开菜单 › 二级菜单导航栏（左侧） |
二级菜单导航栏（左侧）
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 目标： 实现左侧的二级菜单导航栏，自适应效果 效果图：点击跳转到演示地址 代码： 左侧导航栏 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; } 一级标题1111111 二级标题1 二级标题2 二级标题3 一级标题1.5 一级标题2 二级标题4 二级标题5 二级标题6 二级标题7 一级标题3 二级标题8 二级标题9 一级标题3 二级标题8 二级标题9 一级标题3 二级标题8 二级标题9 一级标题3 二级标题8 二级标题9 一级标题3 二级标题8 二级标题9 $(document).ready(function(){ for(let i = 0 ; i |
【本文地址】
今日新闻 |
推荐新闻 |