我使用的是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.itema {
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/
#1【使用CSS设置论文下拉菜单的样式】你可以使用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]-->
推荐阅读
- 滑动手势和WordPress模板
- 在不创建新表的情况下为WordPress插件存储变量
- 有关single.php工作原理 WordPress文件的一些信息()
- 在移动设备上滚动时,将锁定元素平滑化到屏幕顶部
- 分享pp助手设置铃声的图文详细教程
- 靠谱助手如何绑定谷歌账号
- 小米盒子WiFi热点怎样设置
- 眼萌激活防删除开关图文详细教程
- 压缩软件哪个好?2345好压与WinRAR的解压缩实力比较