悬停时的Drupal 8 Bootstrap主题下拉菜单

atg963

我正在为Drupal 8创建自定义引导主题,我的目标是将主导航菜单下拉子项悬停在鼠标上,而不是使用户单击,我发现了一些建议,例如将其添加到主题的CSS中:

.dropdown:hover .dropdown-menu {
display: block;
}

这是我的主题.info文件:

function YOURTHEME_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';

if ($element['#below']) {
// Prevent dropdown functions from being added to management menu so it
// does not affect the navbar module.
if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
  $sub_menu = drupal_render($element['#below']);
}
else if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] == 1)) {
  // Add our own wrapper.
  unset($element['#below']['#theme_wrappers']);
  $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
  // Generate as standard dropdown.
  $element['#title'] .= ' <span class="caret"></span>';
  $element['#attributes']['class'][] = 'dropdown';
  $element['#localized_options']['html'] = TRUE;

  // Set dropdown trigger element to # to prevent inadvertant page loading
  // when a submenu link is clicked.
  //$element['#localized_options']['attributes']['data-target'] = '#';
  $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
  //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
}
}

// On primary navigation menu, class 'active' is not set on active menu  item.
// @see https://drupal.org/node/1896674
if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']))) {
$element['#attributes']['class'][] = 'active';
}

$output = l($element['#title'], $element['#href'],    $element['#localized_options']);
   return '<li' . drupal_attributes($element['#attributes']) . '>' .                                                   $output . $sub_menu . "</li>\n";
}

但这对我的主题没有影响,我仍然需要单击以单击下拉菜单。

这是因为Bootstrap下拉菜单适用于click事件。您需要使用jquery编写悬停功能。

那就是我解决的方法:

$(".nav li.expanded").hover(
    function(){
      $(this).addClass("open");
    },function(){
      $(this).removeClass("open");
    }
  );

我添加了打开或删除的类,这些类通过在Bootstrap中单击功能添加。因此,这将打开菜单。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

悬停时的Drupal 8 Bootstrap主题下拉菜单

来自分类Dev

尝试使主题下拉菜单变为OnClick而不是将鼠标悬停

来自分类Dev

Portal 8主题中的弹出按钮或菜单下拉菜单

来自分类Dev

Bootstrap Business(drupal 7)主题中的下拉菜单不起作用

来自分类Dev

悬停时的Bootstrap下拉菜单幻灯片动画

来自分类Dev

Javascript-悬停时的Bootstrap下拉菜单打开子菜单的所有菜单级别

来自分类Dev

简单的下拉菜单–悬停时过渡

来自分类Dev

下拉菜单在悬停时消失

来自分类Dev

悬停时的语义 ui 下拉菜单

来自分类Dev

悬停时 Boostrap 下拉菜单关闭

来自分类Dev

悬停时的CSS过渡下拉菜单-绝对位置左(_s wordpress主题)

来自分类Dev

Bootstrap Nav菜单悬停下拉菜单问题

来自分类Dev

Bootstrap下拉菜单:如何在悬停时触发,但仅在已打开时触发

来自分类Dev

在下拉菜单上悬停时,jQuery悬停下拉菜单消失

来自分类Dev

Bootstrap 3下拉菜单:悬停和单击

来自分类Dev

Bootstrap下拉菜单中悬停页面的页面描述

来自分类Dev

使用bootstrap 3或css在悬停时侧身下拉菜单?

来自分类Dev

悬停时的Bootstrap下拉菜单(带有Creative-Tim图标Navbar)

来自分类Dev

Bootstrap 下拉菜单在悬停时不低于单个项目

来自分类Dev

当光标位于Bootstrap的下拉菜单中时,如何使下拉菜单的颜色变暗?

来自分类Dev

水平下拉菜单悬停

来自分类Dev

单击嵌套的Bootstrap下拉菜单<li>时防止滚动

来自分类Dev

bootstrap3 nav在单击下拉菜单时关闭

来自分类Dev

Jquery 在点击 Bootstrap 下拉菜单时触发特定的 li

来自分类Dev

在鼠标悬停时显示下拉菜单

来自分类Dev

使用CSS在鼠标悬停时创建下拉菜单

来自分类Dev

在错误元素悬停时触发纯CSS下拉菜单

来自分类Dev

悬停时,jQuery下拉菜单不会隐藏

来自分类Dev

CSS下拉菜单在悬停时不起作用

Related 相关文章

  1. 1

    悬停时的Drupal 8 Bootstrap主题下拉菜单

  2. 2

    尝试使主题下拉菜单变为OnClick而不是将鼠标悬停

  3. 3

    Portal 8主题中的弹出按钮或菜单下拉菜单

  4. 4

    Bootstrap Business(drupal 7)主题中的下拉菜单不起作用

  5. 5

    悬停时的Bootstrap下拉菜单幻灯片动画

  6. 6

    Javascript-悬停时的Bootstrap下拉菜单打开子菜单的所有菜单级别

  7. 7

    简单的下拉菜单–悬停时过渡

  8. 8

    下拉菜单在悬停时消失

  9. 9

    悬停时的语义 ui 下拉菜单

  10. 10

    悬停时 Boostrap 下拉菜单关闭

  11. 11

    悬停时的CSS过渡下拉菜单-绝对位置左(_s wordpress主题)

  12. 12

    Bootstrap Nav菜单悬停下拉菜单问题

  13. 13

    Bootstrap下拉菜单:如何在悬停时触发,但仅在已打开时触发

  14. 14

    在下拉菜单上悬停时,jQuery悬停下拉菜单消失

  15. 15

    Bootstrap 3下拉菜单:悬停和单击

  16. 16

    Bootstrap下拉菜单中悬停页面的页面描述

  17. 17

    使用bootstrap 3或css在悬停时侧身下拉菜单?

  18. 18

    悬停时的Bootstrap下拉菜单(带有Creative-Tim图标Navbar)

  19. 19

    Bootstrap 下拉菜单在悬停时不低于单个项目

  20. 20

    当光标位于Bootstrap的下拉菜单中时,如何使下拉菜单的颜色变暗?

  21. 21

    水平下拉菜单悬停

  22. 22

    单击嵌套的Bootstrap下拉菜单<li>时防止滚动

  23. 23

    bootstrap3 nav在单击下拉菜单时关闭

  24. 24

    Jquery 在点击 Bootstrap 下拉菜单时触发特定的 li

  25. 25

    在鼠标悬停时显示下拉菜单

  26. 26

    使用CSS在鼠标悬停时创建下拉菜单

  27. 27

    在错误元素悬停时触发纯CSS下拉菜单

  28. 28

    悬停时,jQuery下拉菜单不会隐藏

  29. 29

    CSS下拉菜单在悬停时不起作用

热门标签

归档