Triggerfundament-Dropdown nur auf Schwebeflug

Question

Ich habe ein Dropdown-Menü für die Foundation 6, wo es Sinn macht, es nur auszulösen, wenn es "schwebt".

<ul class="dropdown menu" data-dropdown-menu="nekvg6-dropdown-menu" role="menubar"> 
    <li class="nav-lorem is-dropdown-submenu-parent is-down-arrow" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Pilates" data-is-click="false"> 
     <a href="/lorem/?L=0" target="_top" class="active" tabindex="0">Lorem</a> 
     <ul class="menu text-left submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu"> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/kursdaten/?L=0" target="_top">Kursdaten</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/ausbildung/?L=0" target="_top">Ausbildung</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/module/?L=0" target="_top">Module</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/methode/?L=0" target="_top">Methode</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/factsheets/?L=0" target="_top">Factsheets</a></li> 
     </ul> 
    </li> 
</ul> 

, wenn der Auslöser der Dropdown (die auch einen Link in sich hat - die angeklickt werden können) ist angezapft auf einem Touch-Gerät, würde ich eher einfach dem Link folgen, statt Öffnung im Inneren des Auslöseelements ist das Dropdown-Menü überhaupt.

Wie soll ich das tun? Verwenden von Daten, was Eingabe und Initialisierung des Menüs nur, wenn es auf der Maus ist? Das klingt ein bisschen schrullig.

Gibt es eine andere, bessere Praxis?

Answer 1

Ich konnte keine Option finden, die es tut, Foundation öffnet nur, wenn es zum zweiten Mal angezapft wird.

Um dies zu tun, müssen Sie einen kleinen Code schreiben, um das Dropdown-Menü nur zu initialisieren, wenn es NICHT ein Touch-Gerät ist.

hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined'); 
if(!hasTouch){ 
    var elem = new Foundation.DropdownMenu($('.dropdown.menu')); 
} 

siehe ein Arbeitsbeispiel. http://codepen.io/shoaibik/pen/yJBJbm

Answer 2

Ich ging schließlich für eine CSS-only-Lösung, da das Dropdown-Verzeichnis über data- Plugin initialisiert wurde. Wenn Sie keine Untermenüs möchten, müssen Sie auch mit ihrem HTML-Code umgehen.

Also habe ich nur zwei Menüs sie über CSS

// Nav with dropdown as default, 
// Without dropdown when touch input is detected 
#offernav-touch { 
    display:none; 
} 

#offernav-default { 
    display:block; 
} 

[data-whatinput='touch'] { 
    #offernav-touch { 
     display:block; 
    } 
    #offernav-default { 
     display:none; 
    } 
} 

ein wenig rau getoggelt Dies mag, aber am Ende ist es recht sauber.