Drupal 8 Bootstrap Theme Dropdown auf Schweben

Question

Ich arbeite an ein benutzerdefiniertes Bootstrap-Thema für Drupal 8 erstellen und mein Ziel ist es, die Haupt-Nav-Menü Dropdown-Elemente auf Hover, anstatt den Benutzer klicken zu lassen, habe ich ein paar Vorschläge gefunden wie das Hinzufügen dieses in meinem Thema zu meinem CSS:

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

und diese zu meinen Themen .info-Datei:

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

Aber das hatte keinen Einfluss auf mein Thema und ich muss noch für die Dropdown-Liste klicken .

Answer 1

Dies liegt daran, dass das Dropdown-Menü Bootstrap auf das Click-Ereignis angewendet wird. Sie müssen die Hover-Funktion mit jquery schreiben.

So habe ich gelöst:

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

ich hinzufügen, die offene oder die Klasse entfernen, die durch Klick-Funktion in Bootstrap hinzuzufügen. Das öffnet also das Menü.

Answer 2

unten CSS Dies kann auch nur mit CSS erreicht werden, verwenden Sie das Untermenü auf schweben zu öffnen,

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