2014年8月11日
将wordpress分类目录与页面整合为自定义导航栏(二)
在《将wordpress分类目录与页面整合为自定义导航栏(一)》一文中我通过修改ribbon主题的header.php中的代码将导航栏的框架搭出来了,但还未对其进行装饰,这篇文章将记录我用匮乏的css知识来装饰小站导航栏的过程。
上篇文章中提到在http://codex.wordpress.org/Template_Tags/wp_list_categories看到了wp_list_categories的css selectors的相关信息:
经过学习,我终于明白了这些css selestors的意义:
1.我希望点选导航栏某目录或浏览该目录下的文章时,该目录可以高亮显示。
根据上述表格,我在style.css中添加了如下代码
1 2 3 |
li.current-cat-parent,li.current-cat,li.current-page-item{ background:#2784c3; } |
刷新后测试,发现由分类目录构成的导航栏可以正常高亮显示。
可是在点击“关于小站”时,该栏不会高亮显示,为什么呢?点选它的时候,它确实有名为current-page-item的class啊,此为不解之一。
2.我还希望当鼠标停留在分类目录的子目录下时,子目录背景色可以显示我指定的颜色。
我先在在style.css中添加了如下代码,可是这段代码没有作用,为什么呢?
1 2 3 |
ul.children a:hover{ background:#2784c3; } |
经过各种尝试,我发现加入下述代码后,我的子目录下的北京色可以显示我指定的颜色,可以显示的颜色都跑出框框了,这又是为什么?我又去打扰了Keenwon站长,Keenwon站长建议我去掉width:100%,果然有效,但他没有告诉我为什么。
1 2 3 4 |
#navigation ul li li a:hover { background-color: #f8ecd7; width: 100%; } |