【CSS美化专题】不一样的菜单用法
本帖最后由 阿凡佬 于 2022-5-1 13:00 编辑祝大家五一快乐啊！ 不知道格友们有没有出去玩呢？还是待在家里陪着家人呢？我也不太愿意去跟着人挤人，听说上景区的路已经堵成紫色了，还不如待家里给格友做一期分享，对吧？
--------------------------------正文开始-------------------------------------------
我们知道，活字格有一个菜单组件，当它横过来的时候，是这样子的
让我们脑洞大开一下，这样子的行为，有点像什么呢？
。
。
。
用这种方式，放在图文列表里来隐藏一些低频使用的按钮，是不是很方便呢
但它既然是个按钮，那我们自然要让它有点按钮的样子，开始动刀！
首先我们来分析下它的DOM结构
它是一个水平菜单，所以它的最父级元素的类是horizontal 和 menuContainer
菜单项则类似于 ForguncyCustomMenuForguncyMenuCellType-_RS_Dark_ThemeStyle2-LEVEL0这样的类名 其中，_RS_Dark_ThemeStyle2是它在设计器内的样式名称，LEVEL0，1，2，3则分别代表了它的一级子项目、二级子项目、三级子项目
这里，为了避免覆盖掉原生的菜单样式，我们可以在设计器内新建一个单元格样式，名称就叫。。。“我的菜单”吧（懒得想名字）
由于我们是直接用CSS去做它的样式，这里我们就不在设计器内设置它的一系列诸如背景色、前景色等属性，以免影响到我们自定义CSS样式的的优先级。（菜单组件跟其他组件不一样，它的单元格样式中的设置会直接给HTML写一个行内样式，而且某些样式还使用了ID选择器，缘于这点特性我们不用且不能给它的单元格设置样式）
好了，我们现在看到所有的菜单项都成了透明背景色，而且是未设置background的那种透明，而不是background: transprent 的这种透明。有什么区别呢？ 当然， 万幸活字格没用background-color:transprent，否则这一条属性将会出现在行内样式，而这意味着我们必须要用!important去覆盖它。就像这样
· 如果设置了单元格样式背景色，则这个背景色会出现在行内样式 · 如果没设置背景色，则行内样式里没有background这一条属性
接下来，我们先来做一级菜单的样式，让它看上去更像个按钮。
好了，一个非常简约的按钮完成了，不知道大家对这个样式满意不满意呢？
接下来，就是二级菜单了，我们要让它看起来像一个下拉框一样
大部分的样式代码，我们都可以照抄一级菜单
但看着总感觉有点那么不尽人意。让我们来找一下问题出在哪
让我们思考一下这两个问题怎么解决
首先，圆角，那我是不是把外部元素设置一个圆角就行了呢？让我们来试一试
通过一级菜单(LEVEL0)用相邻选择器(+)我们取到二级菜单的外框ul元素，并设置它的圆角为8px. 结果可想而知，没有生效
为什么呢，这是因为ul没有设置overflow，而导致内部子元素溢出，将父元素覆盖。所以，我们设置一个overflow:hidden是不是就能解决了呢？
我们发现，圆角已经出来了，但是怎么感觉缺了一角？ 让我们思考一下
当然啦，之所以缺了一角，还不是因为我们的内部元素的边框被父元素隐藏了。我们必须要让第一个内部元素和最后一个内部元素的上下左右的圆角，也同样设置成与父元素圆角弧度一致，这样它的边框才能完整地被体现出来。
说到第一个元素和最后一个元素，那么我们就要请出两个伪类：分别是 :first-child 和 :last-child，他们被指向于处于同一个父元素之内的第一个元素和最后一个元素。
Great! 好了，完整的圆角已经出来了。
而父元素ul的 overflow:hidden就可以不用了，因为子元素已经与父元素完整契合，而且overflow:hidden还会带来一个问题，那就是如果有三级菜单四级菜单，同样会被overflow:hidden隐藏。
接着我们解决另外一个问题，那就是边框框线重叠。我们发现，相邻的两个元素之间的框线似乎更厚了。所以，我们要想办法去掉其中一个框线，以使边框看起来都一样厚。
稍一思考，我们发现解决问题的思路很简单，只需要把除了第一个元素的其他元素的上边框删掉即可
“第一个元素"我们前面已经知道了，可以用:first-child伪类去命中它，那怎么做到“除第一个元素之外”呢？
这里，我要隆重介绍下:not伪类，这是CSS里为数不多的能给你提供逻辑判断功能的伪类，专门给你用来做“除什么东西之外”的这种事情
所以现在，我们要将:first-child伪类和:not伪类结合起来使用
好了，厚厚的框线也消失了，突然觉得精致起来了~！
以下是今天的成品
**** Hidden Message *****
本帖最后由 阿凡佬 于 2022-7-9 15:22 编辑
第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:【CSS美化专题】不一样的菜单用法
第六期:【CSS美化专题】图文列表的妙用
黑色幽默 发表于 2022-5-1 15:46
正好想问下，菜单的样式内置功能能修改么
看不太明白，具体描述一下？ 黑色幽默 发表于 2022-5-1 16:06
这个是图书管理系统的母版页的菜单样式，他这个是怎么实现的呢，横排后的样式怎么设置呢？他这个好像没用 ...
背景色无填充呀，然后再放个背景图在后面 黑色幽默 发表于 2022-5-1 16:39
这个背景去掉了的
这个是没有去掉的
请看我的第四期分享 {:2_26:}{:2_26:}{:2_26:} 666 厉害了大佬，下载来学习学习一下谢谢 666666666666
这个在很多时候能简化操作，确实很好，谢谢作者的用心:)
页:
[1]
2