のDrupal 8のブートストラップのテーマホバー

Question

私はDrupalの8のカスタムブートストラップのテーマを作成するに取り組んでいます

上のドロップダウンと私の目標ではなく、ユーザーのクリックを作るのホバー上のメインナビゲーションメニュードロップダウン子項目を持つことで、私はいくつかの提案を発見しました

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

そして、これを自分のテーマに.infoファイル：：私のテーマで私のCSSにこれを追加するよう

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"; 
} 

しかし、これは私のテーマに影響を及ぼさなかったと私はまだドロップダウンのためにクリックする必要があります。

Answer 1

これは、ブートストラップのドロップダウンメニューがclickイベントに対して機能するためです。 jqueryでホバー機能を記述する必要があります。

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

を私はオープンを追加したり、ブートストラップにクリック機能によって追加クラスを削除します。私は解決方法です

。これでメニューが開きます。

Answer 2

これはまた、唯一のCSSを使用して達成することができ、ホバーにサブメニューを開くには、CSSの下に使用し、

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