A-A+

纯css为wordpress制作多级导航菜单(横版)

2014年11月03日 wordpress技巧 暂无评论 阅读 467 views 次

多级导航菜单是一个非常实用的菜单效果。有时候我们希望导航分类尽可能多一些。比如说三级菜单,四级菜单,甚至五级菜单。这个功能实现起来其实非常简单。只需把display:none,display:block,,还有一个hover属性结合起来就可以实现多级菜单。
首先说明下,wordpress中的导航菜单的形式是这个样子。
wordpress导航菜单原型
这三个都是顶级导航菜单。二级导航菜单是下面这个样子:
wordpress二级导航菜单
三级导航菜单在给二级分类里嵌套一个ul,如下:
wordpress三级导航菜单
现在开始动手吧。显示制作一个二级导航菜单,第二幅图为类:

记得给ul外边加一个div元素名,这里以div代替。
div ul li{width:100px;height:30px;}
div ul li a{width:100px;height:30px;float:left;display:block}//float让所有a标签在同一行显示、block让a元素占满整个li
div ul li ul{display:none}
div ul li:hover ul{display:block}

二级级导航的雏形(其实已经是无限极菜单了),继续添加如下代码就可以变成三级导航。

div ul li ul li ul{display:none}
div ul li ul li:hover ul{display:block}

三级导航制作完成。其实就这么简单。其实这个已经是无限极导航菜单了。

 

标签:

给我留言

Copyright © 杭州seo优化 保留所有权利.   Theme  Ality

用户登录

分享到: