自定义组件--nav菜单

喜欢ヅ旅行 2022-06-09 02:16 174阅读 0赞

做这个东西的出发点很简单，就是把做过的东西，封装起来，写个博客，记录一下，以后项目需要用就可以直接拿来用，做法很简单，不喜欢的勿喷，觉得有用的可以拿去试试。

**直接上代码**

html部分：

css样式部分：

.ul{ width: 700px; height: 80px; margin:20px auto; border-top:1px solid red; border-bottom:1px solid red; }
            .ul ul{ width: 100%; height: 100%; }
            .ul ul li{ width: 18%; height: 80px; float: left; list-style: none; padding: 0 1%; }
    
            .ul ul li a{ display: block; height: 100%; color: #333; text-align: center; line-height: 80px; text-decoration: none; position: relative; }
            .ul ul li a:before{ content: ""; width: 0; height: 0; border-right: 40px solid transparent; border-left: 40px solid transparent; border-bottom: 12px solid red; position: absolute; left: 18%; bottom: 0; opacity: 0; }
            .ul ul li a:after{ content: ""; width: 0; height: 0; border-right: 40px solid transparent; border-left: 40px solid transparent; border-top: 12px solid red; position: absolute; left: 18%; top: 0; opacity: 0; }
            .ul ul li:hover a:before{ opacity: 1; }
            .ul ul li:hover a:after{ opacity: 1; }

效果图：

默认状态：  
![nav默认状态][nav]  
选中状态：  
![nav选中状态][nav 1]

到此结束，简单粗暴，通俗易懂！

[nav]: /images/20220609/16e1a18e3a36409f95487770580c894d.png
[nav 1]: /images/20220609/a5518fde2f87400fba696fded2c98b8a.png