使用简单的css类给WordPress导航菜单添加多重个性化样式
前言
前几天云落在做自己的网站的时候发现菜单不够,所以我想能不能把菜单折叠起来,做成一般企业网站那种,本来打算用导航的CSS类来做的,结果白读之后发现使用CSS类功能的wper太少了,或者根本找不到,好吧自己折腾了,做成了一个简单的二级菜单。
CSS类
CSS类是菜单里面WordPress默认隐藏的一个功能,我们一般也没用到这个功能,先来看下她在哪?
不知道这玩意怎么用是吧,我们随便填写一个东西看看吧
我填写了一个large,保存之后看看源代码发生了什么
我填写了一个large,保存之后看看源代码发生了什么
这个回给导航添加一个class,这下简单了,给这个class添加样式就好了。
CSS3 Columns
除了CSS类,我这里还用了比table更好用的分列式布局方法的CSS3 Columns特性,先介绍下。
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:
- column-count: 列数目
- column-gap: 各列之间间隙宽度
- column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
- column-rule-width:列之间分割线宽度
- column-rule-style:列之间分割线风格
- column-rule-color:列之间分割线颜色
- column-span: 允许一个元素的宽度跨越多列
- column-fill: 分列方式
要想制作出一个漂亮的分列布局,你至少需要用到column-count和column-gap:
/* 3 列,每列之间10px间距 */ ul.col-3 { column-count: 3; column-gap: 10px; }
如果你想美化一下列之间的空隙,这也很简单:
/* 3 列,每列之间10px间距 ,带有金色的隔离线 */ ul.col-3 { column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0; }
指定的元素还可以横跨多列:
/* 以下面的HTML为例: <div class="col-3"> <h3>表头!</h3> <div>列 1</div> <div>列 2</div> <div>列 3</div> <div>列 4</div> <div>列 5</div> <div>列 6</div> <div>列 7</div> <div>列 8</div> <div>列 9</div> <div>列 10</div> <div>列 11</div> <div>列 12</div> </div> */ div.col-3 { column-count: 3; column-gap: 5px; } div.col-3 h2 { column-span: all; text-align:center; background: #eee; }
非常的简单,而且显示结果完全符合我们的预期!
使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。
代码
自己折腾了几下,调出了完美的菜单,代码也分享下吧
.large li { width: 110px } .nav .large ul { visibility: hidden; -webkit-columns: 4; -webkit-column-gap: 0; -moz-columns: 4; -moz-column-gap: 0; -ms-columns: 4; -ms-column-gap: 0; columns: 4; column-gap: 0 }
column
标签的兼容性暂时还不怎么好,所以使用的时候需要添加浏览器标签的后语
git主题使用者可以直接将上面的代码粘贴到主题后台,自定义样式里面就好了,因为中间基本不涉及主题,所以理论上凡是支持二级菜单的都可以这样做的。
-- 完 --
正需要这个,谢谢博主分享