我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
最近在浏览网页的时候，对各式各样的菜单栏和导航栏燃起了兴趣。然后突发奇想，就用纯 CSS 搞了个菜单玩玩。
- 效果展示如下
- 代码块
看完之后，是不是感觉：“我也可以”。并且做起来也不难，毕竟是用纯 CSS 打造的（我的理解就是，没和 JS 搭上关系就都不算太难）。接下来，我来带你们一步步实现它。
实现思路
菜单列表
因为是菜单栏，所以我们先用 ul 和 li 来实现一个菜单列表。
- 代码如下
<ul>
<li data-text="Home"><a href="#">首页</a></li>
<li data-text="Drama"><a href="#">番剧</a></li>
<li data-text="Live"><a href="#">直播</a></li>
<li data-text="Cartoon"><a href="#">漫画</a></li>
<li data-text="Event"><a href="#">赛事</a></li>
<li data-text="Message"><a href="#">消息</a></li>
</ul>
这里有个小细节，就是 data-text 的使用。这是一个自定义标签，在这里将结合 attr() 函数一起使用。attr() 函数返回选择元素的属性值，可以用于任何 CSS 属性。至于具体如何使用，后面会详细介绍。
设计基础样式
菜单列表完成后，就可以开始 CSS 部分的设计了。从最基础的开始设置，背景颜色，水平垂直居中，清除内外边距，IE盒模型，flex布局等等。
- 代码如下
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0d0f1b;
overflow: hidden;
}
对于 ul 和 li 以及 a 链接的基本样式，可以设置如下：
ul{
position: relative;
display: flex;
flex-direction: column;
}
ul li{
list-style: none;
}
ul li a{
position: relative;
display: inline-block;
padding: 6px 15px;
text-decoration: none;
background: #00AEEC;
color: #fff;
border-radius: 25px;
text-transform: uppercase;
letter-spacing: 2px;
overflow: hidden;
transition: 0.5s;
z-index: 1;
}
设置 list-style：none 清除列表的小圆点，设置 flex-direction：column 将列表单元垂直显示，设置 display: inline-block 使 a 成为行内块元素。
设计 hover 样式
完成基础样式之后，就要加入 hover 相关的样式了。何为 hover ？hover 的中文意思是悬停，hover 选择器就是用于选择鼠标指针浮动在上面的元素。在此文设计的菜单栏中，将鼠标移到菜单位置会有缩放以及颜色变化的效果。
- 代码如下
ul:hover li a{
opacity: 0;
}
ul li a:hover{
transform: scale(1.4);
z-index: 100;
background: #FB7299;
opacity: 1;
}
- 效果如下
加入 before 选择器
在 CSS 中，before 的意思是在 ...之前，可以用来创建伪元素。并将其设置为选中元素的第一个子元素，插入到元素的其他内容之前。在此次菜单栏中，before 将与前文提到到 attr（）函数结合使用。
- 代码如下
ul li::before{
content: attr(data-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 6em;
font-weight: 700;
pointer-events: none;
letter-spacing: 100px;
opacity: 0;
transition: 0.5s;
white-space: nowrap;
}
ul li:hover::before{
opacity: 0.05;
letter-spacing: 0;
}
当鼠标移动到某个菜单时，背景上也会显示出菜单内容，菜单内容是被定义在 data-text 中的。当鼠标移开后，将透明度设置为0，使其消失。
- 效果如下
代码块
总结
以上就是一个用纯 CSS 打造的创意型菜单栏，如果各位小伙伴觉得还不错，可以点个赞支持一下。你们的每一个点赞，都是我不断创作的动力。ღ( ´･ᴗ･` )
