wordpress菜单显示css字体,使用WordPress导航CSS类花式玩耍菜单栏

使用简单的css类给WordPress导航菜单添加多重个性化样式

前言

前几天云落在做自己的网站的时候发现菜单不够，所以我想能不能把菜单折叠起来，做成一般企业网站那种，本来打算用导航的CSS类来做的，结果白读之后发现使用CSS类功能的wper太少了，或者根本找不到，好吧自己折腾了，做成了一个简单的二级菜单。

上面的图就是效果图，现在下面介绍下CSS类。

CSS类

CSS类是菜单里面WordPress默认隐藏的一个功能，我们一般也没用到这个功能，先来看下她在哪？

如果你找不到的话，在这里点击勾选好

不知道这玩意怎么用是吧，我们随便填写一个东西看看吧

我填写了一个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为例:

表头!

列 1

列 2

列 3

列 4

列 5

列 6

列 7

列 8

列 9

列 10

列 11

列 12

*/

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主题使用者可以直接将上面的代码粘贴到主题后台，自定义样式里面就好了，因为中间基本不涉及主题，所以理论上凡是支持二级菜单的都可以这样做的。

乐趣公园 , 版权所有