使用WordPress导航CSS类花式玩耍菜单栏

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

前言

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

CSS 类

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

这个回给导航添加一个 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
}

后语

扫码订阅，第一时间获得更新

微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~