纯CSS编写三级导航菜单-附源码
- 2020 年 3 月 5 日
- 筆記
在我们日常浏览网站过程中，会发现每一个网站都会有导航栏，导航栏是做什么的？在一个网站中具有怎么样的意义呢？我们先来了解一下这个问题。
作用
导航栏的作用是连接站点内或者软件内各个主要应用页面，方便使用者（浏览者）对网站内容查找进行快速的定位、寻找资源。
正文
导航栏中涉及到多级导航，本次我们演示的主要是三级导航栏，在深入的层级按照同样的理论进行复制即可。下面一起来看一下吧！
实现效果
实现原理
一级导航的实现是非常简单的，我们直接通过经典的ul、li模式去实现即可，这里面不做太多的说明了。
二级导航主要是基于一级导航进行父子层级操作。对顶级的ul进行绝对定位操作。对子集进行相对定位操作。具体的实现方式可通过代码查看，不做过多的文字描述。
对链接的动画效果使用了一个鼠标指针浮动在元素上时，将背景色和文字颜色调换操作。也是比较简单的效果。
代码部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Css编写多级导航栏菜单</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; float: left; } a{ color: #FFF; text-decoration: none; line-height: 40px; font-size: 14px; } nav{ width: 100%; height: 40px; background-color: #005ca9; } nav ul{ position:absolute; background-color: #005ca9; } nav ul li{ position: relative; } nav>ul>li{ margin: 0 15px; } nav>ul>li>a{ padding: 0 10px; display: block; height: 40px; } nav>ul>li:hover > a{ background-color: #FFF; color: #005ca9; } nav ul li:hover > ul{ display: block; } nav>ul>li>ul, nav>ul>li>ul>li>ul{ display: none; } nav>ul>li>ul>li, nav>ul>li>ul>li>ul>li{ width: 100%; } nav>ul>li>ul>li>a, nav>ul>li>ul>li>ul>li>a{ display: block; width: 100%; text-align: center; } nav>ul>li>ul>li>ul>li:hover >a, nav>ul>li>ul>li:hover >a{ background-color: #FFF; color: #005ca9; } nav>ul>li>ul>li>ul{ width: 100%; position: absolute; top: 0; left: 100%; } </style> </head> <body> <nav> <ul> <li><a href="#" title="首页">首页</a></li> <li><a href="#" title="关于我们">关于我们</a></li> <li> <a href="#" title="产品中心">产品中心</a> <ul> <li><a href="" title="机械类">机械类</a></li> <li><a href="" title="军工类">军工类</a></li> <li><a href="" title="化工类">化工类</a></li> <li><a href="" title="勘探类">勘探类</a></li> </ul> </li> <li> <a href="#" title="新闻资讯">新闻资讯</a> <ul> <li><a href="" title="行业新闻">行业新闻</a></li> <li><a href="" title="最新资讯">最新资讯</a></li> <li> <a href="" title="产品公告">产品公告</a> <ul> <li><a href="" title="近期公告">近期公告</a></li> <li><a href="" title="往期公告">往期公告</a></li> </ul> </li> <li><a href="" title="公司新闻">公司新闻</a></li> </ul> </li> <li><a href="#" title="经典案例">经典案例</a></li> <li><a href="#" title="意见反馈">意见反馈</a></li> <li><a href="#" title="联系我们">联系我们</a></li> </ul> </nav> </body> </html>
知识补充
本次主要使用到了一下知识点：
1、CSS 子元素选择器
子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。
2、CSS 定位机制
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
3、CSS锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
提示：
- 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
- 伪类名称对大小写不敏感。
