使用简单的css类给WordPress导航菜单添加多重个性化样式
除了CSS类,我这里还用了比table更好用的分列式布局方法的CSS3 Columns特性,先介绍下。
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:
要想制作出一个漂亮的分列布局,你至少需要用到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
标签的兼容性暂时还不怎么好,所以使用的时候需要添加浏览器标签的联系客服