如何在悬停而不是单击时使Twitter引导程序(对于Wordpress!)菜单下拉列表

时间:2012-06-13 00:22:16

标签: wordpress twitter-bootstrap drop-down-menu

我已根据bootstrap for wordpress版本制作了自定义wordpress主题,并且我尝试在悬停时打开下拉导航栏,而不是点击。

我在这里找到this answer,但似乎它解决了原始(无wordpress)引导程序。无论是那个还是我都不清楚如何实现它,但它看起来像是wordpress的不同。

我几乎设法通过在bootstrap-dropdown.js文件中用“hover”替换“click”来实现它,但是我实际上无法将鼠标移动到子菜单项,因为我移动时下拉消失了光标和下拉列表不会保持打开状态。

理想情况下,它会悬停在桌面上,仍然可以点击移动设备,但这不是必须的。我将牺牲点击手机悬停在桌面上。

如果有人可以提供帮助,那就太棒了。

3 个答案:

答案 0 :(得分:7)

有三个步骤可以解决这个问题:

1)只需将此代码添加到Theme - >中找到的bootstrap.css中。库 - > css - > bootstrap.css

ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;    
}

这是一个使用CSS而不是触及Javascript或JQuery的快速修复。但是,当您将鼠标悬停在菜单上时,这可能会导致一些错误的UI行为。

2)您将无法链接到父类别。要解决这个问题,请转到主题的functions.php,然后在第417行删除:

class="dropdown-toggle" data-toggle="dropdown"

所以你的行将是:

$attributes .= '';

3)如果将光标从父类别移动到下拉菜单太慢,菜单将关闭。这是因为留有余量。要解决此问题,请在bootstrap.css中的第一个代码下面添加此代码:

.navbar .dropdown-menu {
 margin-top: 0px;
}

就是这样,你的Wordpress Bootstrap主题现在应该可以在不点击父类别的情况下显示下拉菜单。

答案 1 :(得分:1)

我所做的是将这一行添加到我的bootstrap.css附近的下拉式样式中:

.dropdown.open .dropdown-menu {
  ..........
/*--- Hover Dropdown Menu---*/
ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;    
}
.dropdown-menu:before {
............

希望有所帮助。

答案 2 :(得分:0)

这适用于Wordpress Bootstrap:

.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: none;
}