• 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

  • 给网站增加一个离线缓存功能

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

WordPress 云落 3年前 (2016-03-16) 593次浏览 1个评论
文章目录[隐藏]

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

-- 完 --
使用WordPress导航CSS类花式玩耍菜单栏
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA

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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 正需要这个,谢谢博主分享
    学乐教育2017-11-24 01:51 回复 Linux | Chrome 53.0.2785.134