html--简单竖向菜单栏的实现

(图片地址：https://panjiachen.github.io/vue-element-admin/#/dashboard)
如图示这种竖向排列的菜单栏，展示效果比较好，而且交互比较直观，下面来介绍一下实现步骤
1.先把整体布局写出来
1.1由于子菜单展开收缩会变化div大小，所以使用flex弹性盒子。

<div class="box"><ul class="ulList"><li class="liList"><p onclick="menu_active(ulOne)">这是第一个子菜单</p><ul class="childUl" id="ulOne" style="display: none;"><li>选项1.1</li><li>选项1.2</li></ul></li><li class="liList"><p onclick="menu_active(ulTwo)">这是第二个子菜单</p><ul class="childUl" id="ulTwo" style="display: none;"><li>选项2.1</li><li>选项2.2</li></ul></li><li class="liList"><p onclick="menu_active(ulThree)">这是第三个子菜单</p><ul class="childUl" id="ulThree" style="display: none;"><li>选项3.1</li><li>选项3.2</li><li>选项3.3</li></ul></li><li class="liList"><p onclick="menu_active(ulFour)">这是第四个子菜单</p><ul class="childUl" id="ulFour" style="display: none;"><li>选项4.1</li></ul></li></ul>
</div>

*{margin: 0;padding: 0;
}
.box{width: 300px;top: 10%;left: 10%;display: flex;position: absolute;
}
.ulList{width: 100%;display: flex;left: 20%;top: 20%;flex-direction: column;background-color: grey;position: absolute;list-style: none;
}
.liList{width: 100%;height:100px;display: flex;flex-direction: column;background-color: #FF9900;position: relative;
}
.liList p{font-size: 20px;text-align: center;
}

1.2先把子菜单下的ul隐藏。
这里要注意一点：list-style设置为none时，会发现li前边的点虽然消失了，但还是占着空间，如下图所示

出现此原因是因为默认情况下，li是有margin和padding的，此时只需要给其设置都为0即可，为了方便，直接全局修改：

*,body{margin: 0;padding: 0;
}

1.3给一级ul设置了flex，其下的每一个选项下的子菜单栏是不需要再设置flex的，只需要给每一个ul设置宽度，然后每一个li设置相同用的高度和宽度即可。

.liList ul{width: 100%;position: relative;
}
.liList ul li{width: 100%;height: 60px;line-height: 60px;background-color: #FF4400;list-style: none;text-align: center;position: relative;
}

2.给每一个菜单选项添加点击事件，选择展开或者隐藏子菜单
这里使用到选择语句进行判断

function menu_active(ulId){if(ulId.style.display == "none"){ulId.style.display = "block"}else{ulId.style.display = "none"}
}

写到这里，代码基本写完了，那就渲染一下看看效果

诶？为什么效果和我想得不一样？
这里会发现二级菜单展示的时候，会被一级菜单覆盖掉。仔细寻找后发现问题出在高度设置上

.liList{width: 100%;line-height: 80px;display: flex;flex-direction: column;background-color: #FF9900;position: relative;
}

给每一个一级菜单设置了一个100px的高度！这就使得无论怎么改动二级菜单，始终是和一级菜单冲突的，把它去掉就好了。

好啦，一个使用ul列表的竖向菜单栏就做好了✌！
当然你也可以自己渲染的更美观一些✌✌✌
后续如果要给每一个菜单选项添加链接的话也是不难的。

–CSDN@向上攀爬 2022.3.23 20:44

html--简单竖向菜单栏的实现相关推荐

java实现极简单的 TXT小说阅读器(第三版)
第三版在第二版的基础上增加了保存以及另存为的选项. 并且完善了简单的菜单栏. SaveAndSaveAs类: public class SaveAndSaveAs { public SaveAnd ...
菜单栏程序坞APP的实现2（全面优化）
1.背景在[菜单栏程序坞APP的实现]一文中,描述了之前开发的一款简单的菜单栏APP,它同拖拽方式把APP以Button的方式显示在菜单栏弹窗视图中,通过点击Buton来实现打开对应的软件,如下图: ...
运用面向对象原则，设计一款音乐点唱机
2019独角兽企业重金招聘Python工程师标准>>> ．设计内容及要求能够实现简单的音乐播放器功能,如:打开本地文件,播放,暂停,停止,背景播放,单曲循环等等,界面充实,交互友好 ...
Linux 安装卸载软件及管理软件仓库
软件仓库 Linux的软件包都存放在一个地方,叫做软件仓库,repository. 因为Linux是在Windows之后诞生的(1991年前后),所以为了避免Windows的这个"弊端&qu ...
Cocoa编程中视图控制器与视图类详解
iPhone编程规则是:一个窗口,多个视图.UIView是iPhone屏幕上很多控件的基础类.每个iPhone用户界面都是由显示在UIWindow(这其实也是个特殊的UIView)内的众多UIView ...
ios开发学习--选项卡（Tab Bar）效果源码分享--系列教程
自定义UITabBar 介绍: 自定义UITabBar,包括可自定义tab bar的背景图.tab bar的高度以及每个tab的图片,满足各种界面需求.但是,没有文字. http://ios.itmd ...
Visio 去掉页边距和空白页的方法
有时自己画的visio不在画板中央,导致空白地方较大.将其放到中央后,发现空白地方还是很大(这是页边距的原因).下面给出去掉页边距的方法. 以visio2013为例,方法很简单. 菜单栏选" ...
使用Axure制作手风琴菜单
Axure在页面设计这一块起到了很大作用,它不仅可以将客观的文本改变为直观的演示模板,还可以对于页面的各个方面进行UI设计美化页面等等. 例如设计一个网站肯定少不了菜单栏.菜单栏的样式很多,有点击显示 ...
一分钟集成类似抖音、头条、腾讯视频、网易新闻、飞猪、咸鱼等常用标题栏
项目中经常会用到各种各样的标题栏,索性将自己之前的功能模块抽离开源出来,如果觉得该三方库还不错,可以★Star(#)支持一下你的★Star就是我最大的动力,如果觉得哪些地方还有优化的空间,也希望您能不 ...

html--简单竖向菜单栏的实现

html--简单竖向菜单栏的实现相关推荐

最新文章

热门文章