Question

我正在使用Wordpress Thesis主题，该主题附带标准下拉菜单，我想将其转换为双层水平菜单。我想要的是，当你点击一个父项时，那个父母的孩子（但没有其他孩子）是可见的。

结构是这样的：

<ul class="menu"> 
<li class="tab tab-home"><a href="http://dirtydeals.org.uk">Home</a></li> 
<li class="tab tab-1 current-parent"><a href="http://dirtydeals.org.uk/about/"     title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1 current"><a href="http://dirtydeals.org.uk/about/subnavigation-    page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://dirtydeals.org.uk/about/sub-page/" title="Sub-    page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://dirtydeals.org.uk/action/"     title="action">action</a></li> 
<li class="tab tab-3"><a href="http://dirtydeals.org.uk/media/" title="Media">Media<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-3"><a href="http://dirtydeals.org.uk/media/sample-page-2/"     title="Sample Page">Blog</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul>

我的工作得相当好，但问题是我找不到专门针对儿童用品的方法。如果我在查看“关于”时隐藏“博客”，那么当查看“关于”其中一个子项时，它还会隐藏“关于”的子项或隐藏整个子菜单。

这是我的CSS：

/*Remove the hover drop-down effect*/
.custom .menu ul { position: absolute; visibility: visible; list-style: none; z-    index: 110; }

/*No clears on this so we can make the submenu horizontal*/
.custom .menu ul li { clear: none; }

/*Styling the submenu*/


.custom ul.submenu {
margin: 0px 0 0 0;
}

.custom ul.submenu a {
font-size: 1.3em;
text-transform: uppercase;
padding-right: 10px;
}

.custom ul.menu li ul.submenu li.item {
display: inline;
}

.custom ul.menu li.current ul.submenu li.item {
display: inline;
}

.custom ul.menu li { border: 1px solid red; }


.custom ul.menu li ul.submenu li.item a {  }


/*Hacking the submenu to make children work when a subpage is viewed*/

.custom ul.menu li ul.submenu li.item a { display: inline; }
.custom ul.menu li ul.submenu li.item a { border: 1px solid yellow; }
.custom ul.menu li.current-parent ul.submenu { border: 1px solid blue;}
.custom ul.menu li.current-parent ul.submenu li.item a { border: 1px solid white; }

.custom ul.menu li.current ul.submenu {
background-color: #444444;
padding: 10px;
width: 500px;
}

.custom ul.menu li.current ul.submenu li.item {
display: inline;
white-space: nowrap;
}

.custom ul.menu li.current ul.submenu li.item  a {
background-color: transparent;
display: inline;
}   


.menu ul, .menu ul li {
width: 18em;
}


.custom ul.menu li.current ul.submenu li.item:after {
content: "/";
font-size: 14px;
}

.custom ul.menu li.current ul.submenu li:last-child:after {
content: "";
}

/*Annoyingly each individual submenu has to be positioned separately*/
.custom ul.menu li.current ul.submenu-1 {
position: absolute;
left: -110px;
}

有没有比我更有逻辑的大脑和更好的眼睛的人可以看看吗？谢谢！

页面位于：http://dirtydeals.org.uk/about/subnavigation-page/

Answer 1

您可以使用wordpress中的条件标签轻松实现这一目标。对于例如仅当页面不是“关于”

时，以下代码才会显示“博客”

<ul class="menu"> 
<li class="tab tab-home"><a href="http://dirtydeals.org.uk">Home</a></li> 
<li class="tab tab-1 current-parent"><a href="http://dirtydeals.org.uk/about/"     title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1 current"><a href="http://dirtydeals.org.uk/about/subnavigation-    page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://dirtydeals.org.uk/about/sub-page/" title="Sub-    page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://dirtydeals.org.uk/action/"     title="action">action</a></li> 
<li class="tab tab-3"><a href="http://dirtydeals.org.uk/media/" title="Media">Media<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<?php if ( !is_page('about') ) { ?>
<li class="item item-3"><a href="http://dirtydeals.org.uk/media/sample-page-2/"     title="Sample Page">Blog</a></li> 
<?php } ?>
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

使用CSS设置Thesis下拉菜单的样式

1 个答案: