【CSS美化专题】不一样的菜单用法

安子

本帖最后由阿凡佬于 2022-5-1 13:00 编辑

祝大家五一快乐啊！不知道格友们有没有出去玩呢？还是待在家里陪着家人呢？我也不太愿意去跟着人挤人，听说上景区的路已经堵成紫色了，还不如待家里给格友做一期分享，对吧？

--------------------------------正文开始-------------------------------------------
我们知道，活字格有一个菜单组件，当它横过来的时候，是这样子的

动画.gif773225707.png

让我们脑洞大开一下，这样子的行为，有点像什么呢？
。
。
。
动画.gif700474242.png

用这种方式，放在图文列表里来隐藏一些低频使用的按钮，是不是很方便呢

但它既然是个按钮，那我们自然要让它有点按钮的样子，开始动刀！

首先我们来分析下它的DOM结构
image.png409347533.png

它是一个水平菜单，所以它的最父级元素的类是horizontal 和 menuContainer
菜单项则类似于 ForguncyCustomMenuForguncyMenuCellType-_RS_Dark_ThemeStyle2-LEVEL0这样的类名其中，_RS_Dark_ThemeStyle2是它在设计器内的样式名称，LEVEL0，1，2，3则分别代表了它的一级子项目、二级子项目、三级子项目

这里，为了避免覆盖掉原生的菜单样式，我们可以在设计器内新建一个单元格样式，名称就叫。。。“我的菜单”吧（懒得想名字）

image.png609081725.png

由于我们是直接用CSS去做它的样式，这里我们就不在设计器内设置它的一系列诸如背景色、前景色等属性，以免影响到我们自定义CSS样式的的优先级。（菜单组件跟其他组件不一样，它的单元格样式中的设置会直接给HTML写一个行内样式，而且某些样式还使用了ID选择器，缘于这点特性我们不用且不能给它的单元格设置样式）

image.png58460692.png

好了，我们现在看到所有的菜单项都成了透明背景色，而且是未设置background的那种透明，而不是background: transprent 的这种透明。有什么区别呢？当然，万幸活字格没用background-color:transprent，否则这一条属性将会出现在行内样式，而这意味着我们必须要用!important去覆盖它。就像这样

image.png726366271.png

· 如果设置了单元格样式背景色，则这个背景色会出现在行内样式 · 如果没设置背景色，则行内样式里没有background这一条属性

接下来，我们先来做一级菜单的样式，让它看上去更像个按钮。
image.png828635253.png

好了，一个非常简约的按钮完成了，不知道大家对这个样式满意不满意呢？

接下来，就是二级菜单了，我们要让它看起来像一个下拉框一样
大部分的样式代码，我们都可以照抄一级菜单
image.png604157104.png

但看着总感觉有点那么不尽人意。让我们来找一下问题出在哪

image.png552796020.png

让我们思考一下这两个问题怎么解决

首先，圆角，那我是不是把外部元素设置一个圆角就行了呢？让我们来试一试

image.png143689879.png

通过一级菜单(LEVEL0)用相邻选择器(+)我们取到二级菜单的外框ul元素，并设置它的圆角为8px. 结果可想而知，没有生效

为什么呢，这是因为ul没有设置overflow，而导致内部子元素溢出，将父元素覆盖。所以，我们设置一个overflow:hidden是不是就能解决了呢？
image.png755611877.png

我们发现，圆角已经出来了，但是怎么感觉缺了一角？让我们思考一下

当然啦，之所以缺了一角，还不是因为我们的内部元素的边框被父元素隐藏了。我们必须要让第一个内部元素和最后一个内部元素的上下左右的圆角，也同样设置成与父元素圆角弧度一致，这样它的边框才能完整地被体现出来。

说到第一个元素和最后一个元素，那么我们就要请出两个伪类：分别是 :first-child 和 :last-child，他们被指向于处于同一个父元素之内的第一个元素和最后一个元素。
image.png199250487.png

Great! 好了，完整的圆角已经出来了。

而父元素ul的 overflow:hidden就可以不用了，因为子元素已经与父元素完整契合，而且overflow:hidden还会带来一个问题，那就是如果有三级菜单四级菜单，同样会被overflow:hidden隐藏。

接着我们解决另外一个问题，那就是边框框线重叠。我们发现，相邻的两个元素之间的框线似乎更厚了。所以，我们要想办法去掉其中一个框线，以使边框看起来都一样厚。

稍一思考，我们发现解决问题的思路很简单，只需要把除了第一个元素的其他元素的上边框删掉即可
“第一个元素"我们前面已经知道了，可以用:first-child伪类去命中它，那怎么做到“除第一个元素之外”呢？

这里，我要隆重介绍下:not伪类，这是CSS里为数不多的能给你提供逻辑判断功能的伪类，专门给你用来做“除什么东西之外”的这种事情

所以现在，我们要将:first-child伪类和:not伪类结合起来使用
image.png498262633.png