WordPress dropdown-navigation der virker med iOS

Jeg sidder og opdaterer min hjemmeside i øjeblikket, og stødte på et lille problem med mine dropdown-menuer i navigationsbaren. På en almindelig desktop-pc virker det fint, og på min iPhone folder menuen sig også ud – men den kunne kun lukke hvis jeg trykkede på et andet menupunkt.

iphone-6s-34

Jeg ville gerne have, at den også lukkede hvis man trykkede et hvilket som helst sted uden for navigationsområdet, så jeg måtte researche lidt. Efter mange timer fik jeg endelig strikket noget jQuery-kode sammen, som ser ud til at virke. Jeg er bestemt ingen haj til jQuery, så jeg har lånt lidt hist og her.

Menuen er en custom menu, der bliver spyttet ud vha. <?php wp_nav_menu( array( 'container' => 'false' ) ); ?>, som bliver vist uden container-div, da jeg bruger min egen .navigation. Nedenstående er et tænkt eksempel, men menuen kunne se således ud:

<div class="navigation">
  <ul id="menu-navigation" class="menu">
    <li id="menu-item-xxx" class="menu-item current-menu-parent menu-item-has-children"><a href="#">Parent 1</a>
      <ul class="sub-menu">
        <li id="menu-item-xxx" class="menu-item current-menu-item"><a href="#">Child 1-1</a></li>
        <li id="menu-item-xxx" class="menu-item current-menu-item"><a href="#">Child 1-2</a></li>
        <li id="menu-item-xxx" class="menu-item current-menu-item"><a href="#">Child 1-3</a></li>
      </ul>
    </li>
    <li id="menu-item-xxx" class="menu-item menu-item-has-children"><a href="#">Parent 2</a>
      <ul class="sub-menu">
        <li id="menu-item-xxx" class="menu-item"><a href="#">Child 2-1</a></li>
        <li id="menu-item-xxx" class="menu-item"><a href="#">Child 2-1</a></li>
      </ul>
    </li>
    <li id="menu-item-xxx" class="menu-item"><a href="#">Normal</a></li>
  </ul>
</div>

Jeg vil ikke gå i detaljer med hvordan undermenuerne positioneres i forhold til hovedmenuen (det regner jeg med at de fleste ved), men blot fortælle at de starter ud med display: none; for at skjule dem når siden indlæses.

Nederst på siden (f.eks. i footer.php) indsættes følgende jQuery-kode:

<script type="text/javascript">
// Funktion 1
$('.menu-item-has-children').on('mouseenter touchstart', function(){
  $(this).children('.sub-menu').css({'display':'block'});
});

// Funktion 2
$('.menu-item-has-children').on('mouseleave', function(){
  $(this).children('.sub-menu').css({'display':'none'});
});

// Funktion 3
$(document).on('touchstart', function(){
  $('.sub-menu').css({'display':'none'});
});

// Funktion 4
$('#menu-navigation').on('click touchstart', function(event){
  event.stopPropagation();
});
</script>

Funktion 1 holder øje med om musen bevæger sig ind på (eller om man på en touchenhed trykker på) et menupunkt med class .menu-item-has-children (dvs. at det har en undermenu), og sætter undermenuens (.sub-menu) CSS til display: block; for at vise den.

Funktion 2 holder øje med om musen bevæger sig ud fra et menupunkt der har en undermenu, og sætter CSS til display: none; for at skjule den igen.

Funktion 3 holder øje med hele skærmen, og hvis man på en touchenhed trykker et hvilket som helst sted, bliver undermenuens CSS sat til display: none; for at skjule den.

Funktion 4 fritager navigationsområdet (#menu-navigation) fra funktion 3s klikfunktion. Hvis ikke, ville undermenuerne blive vist og skjult ved ét og samme klik.

Prøv selv på http://projects.psylicium.dk/ios-dropdown.htm og se om det virker. Og hvis det kan gøres på en mere korrekt eller simpel måde end min, så giv endelig lyd 🙂