我想创建一个自定义的下拉菜单。WordPress的菜单项悬停
我的代码如下所示:
<div id="header"> </div>
<div class="layer1_col">
<?php wdg::displayMenu('main'); ?>
</div>
<div class="programmingTable"></div>
<div id="main">
的WDG :: displayMenu( '主');生成在wordpress后台创建的名为“main”的菜单,显然。 theres没有改变wdg,因为我需要使用它。
而我试图编辑菜单项12,当我编辑在铬网站这是如何建立菜单(这就是我如何到菜单项12)。
<ul id="menu-main" class=""><li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-96"><a href="http://jouwfm.100200.nl/">NIEUWS</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://jouwfm.100200.nl/archief/">ARCHIEF</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a>PROGRAMMERING</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://jouwfm.100200.nl/vacatures/">VACATURES</a></li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://jouwfm.100200.nl/adverteren/">ADVERTEREN</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://jouwfm.100200.nl/contact/">CONTACT</a></li>
</ul>
而菜单项目12不是真正的菜单项目。它没有连接到它的链接,div(.programmingTable)将被填充所有不同的帖子,但是这不包括问题)。
我的CSS是这样的:
.programmingTable{
display:none;
margin-left: 10px;
margin-right: 10px;
padding: 0;
height: 380px;
line-height: 1.5em;
background-color: #e3e3e3;
position: absolute;
z-index: 5;
width: 934px;
top: 87px;
padding-left: 8px;
padding-right: 8px;
padding-top: 45px;
border-bottom-left-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-webkit-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
-moz-box-shadow: 0 7px 9px rgba(50,50,50,0.41);
box-shadow: 0 7px 9px rgba(50,50,50,0.41);
background: -webkit-gradient(linear,0% 0,0% 90%,from(#d9d9d9),to(#fbfbfb));
background: -webkit-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -moz-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -ms-linear-gradient(top,#d9d9d9,#fbfbfb);
background: -o-linear-gradient(top,#d9d9d9,#fbfbfb);
}
#menu-item-12:hover .programmingTable{
display:block;
}
使用不透明,z-index的也试过。 z-index可以工作,但其余的div不是相同的颜色。它看起来不正确。
我已经尝试过使用jQuery来做到这一点使用此:
jQuery('#menu-item-12').mouseover(
jQuery(document).ready(function() {
jQuery('.programmingTable').fadeIn(200)
})
);
jQuery('#menu-item-12').mouseleave(
jQuery(document).ready(function() {
jQuery('.programmingTable').fadeOut(200)
})
);
这是行不通的。好吧,我想是。它使项目淡入淡出,然后再次淡出,一次在页面加载。悬停在有问题的div上时,它什么也不做。
我一直在这个问题卡住了几天,现在任何帮助将不胜感激。
关于我的意思的更好的例子是this site悬停在“程序员”上。
编辑:这里的类上displayMenu
static public function displayMenu($name, $atts=array())
{
// Getting/Setting the variablen
extract(shortcode_atts(array('container' => 'div',
'containerid' => '',
'containerclass' => '',
'menuid' => '',
'menuclass' => '',
'afterlabel' => '',
'beforelabel' => '',
), $atts
));
wp_nav_menu(array('menu' => $name,
'menu_id' => $menuid,
'menu_class' => $menuclass,
'link_before' => $beforelabel,
'link_after' => $afterlabel,
'container' => $container,
'container_id' => $containerid,
'container_class' => $containerclass,
));
}
是下拉菜单悬停的问题? – James
@詹姆斯没有下拉菜单,只需要在悬停时显示的div。 – Bjorn9000