你在这里

drupal7 bootstrap主题 多级菜单只显示两级后续不显示问题的解决方案

主标签

  • 背景

drupal7 bootstrap主题下,多级菜单只能显示两级后续不显示。添加的菜单项如下图所示:wechatimg27.jpeg

但菜单展示效果如下图所示:

wechatimg31.jpeg

不能如预期展示所有菜单项。

  • 解决方案

步骤1:

在菜单编辑页面勾选“以展开方式显示”项,如下图所示:

wechatimg29.jpeg

步骤2:

在bootstrap子主题的template.php文件中添加如下代码:

函数名替换规则,subtheme_menu_link__main_menu,subtheme用主题名替换,main_menu用你要修改的菜单名替换。

<?php
function xxx_menu_link__xxx($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']);
    } elseif ((!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>';
     
$element['#attributes']['class'][] = 'dropdown-submenu';
     
$element['#localized_options']['html'] = TRUE;
     
$element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
     
$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    } else {
      unset(
$element['#below']['#theme_wrappers']);
     
$sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
     
$element['#title'] .= ' <span class="caret"></span>';
     
$element['#attributes']['class'][] = 'dropdown';
     
$element['#localized_options']['html'] = TRUE;
     
$element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
     
$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    }
  }
  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";
}
?>

步骤3:

在bootstrap子主题css文件夹下style.css文件中添加如下代码:

.dropdown-submenu{position:relative}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}
.dropdown-submenu:hover>.dropdown-menu{display:block}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}
.dropdown-submenu:hover>a:after{border-left-color:#fff}
.dropdown-submenu.pull-left{float:none}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}

步骤4:

清空缓存,效果如下图所示:wechatimg41.jpeg

  • 备注:

这个似乎只能一个菜单模块一个菜单模块的用该方法去解决,不能一次性解决所有菜单模块的多级显示问题。有更好的解决方案的,欢迎联系我qq:625475571更新,谢谢。

龙马给的英文参考文档https://www.drupalgeeks.com/drupal-blog/how-render-bootstrap-sub-menus,表示感谢。

Drupal 版本: 

猜你喜欢