• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

WordPress 云落 2年前 (2016-03-16) 374次浏览 已收录 2个评论
文章目录[隐藏]

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

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

前言

使用 WordPress 导航 CSS 类花式玩耍菜单栏
上面的图就是效果图,现在下面介绍下 CSS 类。

CSS 类

使用 WordPress 导航 CSS 类花式玩耍菜单栏如果你找不到的话,在这里点击勾选好使用 WordPress 导航 CSS 类花式玩耍菜单栏

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

使用 WordPress 导航 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
}

后语

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

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 WordPress 导航 CSS 类花式玩耍菜单栏
喜欢 (6)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 厉害厉害,学习了
    微信红包活动网2017-12-04 14:32 回复 Windows 7 | Chrome 55.0.2883.87
  2. 正需要这个,谢谢博主分享
    学乐教育2017-11-24 01:51 回复 Linux | Chrome 53.0.2785.134