纯 CS3 多级下拉菜单

gearss 2016-05-19

展开全文

本帖最后由 bjfancy 于 2016-3-12 14:26 编辑

之前有用 CSS3 新特性 :checked 选择器写了两个简单的标签切换效果后台面板和CSS3 Tab 切换,这两个原理是一样的，不一样的只是它们的样式而已，通过 :checked 这个强大的选择器我们可以不借助 JavaScript 的情况下写出标签切换的功能，不过当然拉，与通过 JavaScript 来写的相比，纯 CSS3 写的标签切换效果在特效上和兼容性上都还有一定的差距，不过我个人觉得能不用 JavaScript 就尽量不用，这次我又用 :hover 伪类写了个非常简单的多级菜单下拉效果，这种菜单在博客中比较常见。

Github Demo

先贴 HTML 代码：

<nav class="menu">
<ul>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a>
<ul>
<li><a href="">四级菜单</a></li>
<li><a href="">四级菜单</a></li>
<li><a href="">四级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">一级菜单</a></li>
<li><a href="">一级菜单</a></li>
</ul>
</nav>

复制代码

通过 LESS 可以很清晰的查看元素在 HTML 中的嵌套关系，在这里我使用：

li ul { display: none;}

把所有 li 元素下面的 ul 隐藏掉，因为待会儿我们会通过对 li 中的 a 标签使用 :hover 伪类来判断什么时候该显示它们，代码如下：

.menu li a:hover + ul { display: block;}

这段代码的意思是，当鼠标移到某个 li 元素中的 a 标签时，如果这个 li 标签包含了 ul 标签，这显示这个 ul 标签，其中的 + 号是选择相邻兄弟选择器，在这里的意思是紧跟 a 标签后的第一个兄弟元素 ul ，在这里为什么不用 ~ 选择器是因为如果使用它了的话，当我们鼠标移动到某个包含了多级菜单的菜单上时，其后代元素中的所有 ul 都会显示，换句话说就是它的所有子菜单都会同时显示，这并不是我们想要的结果，所以在这里只能用 + 相邻兄弟选择器。

还有一点要注意的是，如果此时你要把鼠标移动到二级菜单上的话，它会马上消失，这是因为我们只对当鼠标移动到 a 标签上时才显示后面的 ul，所以当我们鼠标移除 a 标签的一瞬间 ul 的 display 属性值又变成了 none 了，所以在这里我们还需要对 ul 本身的 :hover 做出设置，如下代码：

.menu li ul:hover { display: block;}

这样当我们把鼠标从 a 标签移动到它后面的 ul 时 ul 本身不会消失了。