Mobil dropdown-navigation

Kode

Her er et lille tip til dropdown-menuer i f.eks. WordPress: De er sådan set nemme nok at style og sætte op til museklik og hover-events, men når man er på mobil og bruger pølsefingrene, er det straks en anden sag – eller rettere, det er hvad der gør sig gældende for Safari på iOS i alt fald. Man kan fint trykke på de almindelige menuer, men trykker man på et menupunkt med undermenu, skal man holde fingeren på et øjeblik, før den viser sig. Det er ikke skidesmart, og jeg vil gerne have at den i det mindste folder sig ud så snart man trykker på menupunktet. Derfor har jeg lavet en lille guide til hvordan det gøres. Jeg har brugt den skabelon WordPress spytter ud vha. wp_nav_menu();, men det er også nemt at fikse med sin egen navigations-strukturer.

DEMO

Menuen er opbygget således:

<ul id="menu-nav-header-1" class="menu">
   <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu Item 1</a></li>
   <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu Item 2</a></li>
   <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-xxx"><a>Menu Item 3 w/child</a>
      <ul class="sub-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 1</a></li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 2</a></li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 3</a></li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 4</a></li>
      </ul>
   </li>
   <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-xxx"><a>Menu Item 4 w/child</a>
      <ul class="sub-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 1</a></li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 2</a></li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 3</a></li>
      </ul>
   </li>
</ul>

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-xxx"><a>Menu Item 3 w/child</a>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 1</a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 2</a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 3</a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 3 Child 4</a></li>

</ul>

</li>

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-xxx"><a>Menu Item 4 w/child</a>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 1</a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 2</a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">Menu 4 Child 3</a></li>

</ul>

</li>

</ul>

CSS:

.navigation {
   width: 100%;
   background-color: #333;
}

.navigation ul.menu {
   background-color: #000;
   padding: 0;
}

.navigation ul.menu li.menu-item {
   display: inline-block;
   background-color: #999;
   line-height: 3rem;
   position: relative;
}

.navigation ul.menu li.menu-item a {
   display: block;
   padding: 0 1rem;
}

.navigation ul.menu li.menu-item:hover {
   background-color: #0bf;
}

.navigation ul.menu li.menu-item-has-children:hover ul.sub-menu {
   display: block;
}

.navigation ul.menu li.menu-item ul.sub-menu {
   position: absolute;
   width: 100%;
   display: none;
   padding: 0;
}

.navigation ul.menu li.menu-item ul.sub-menu li {
   display: block;
}

.navigation ul.menu li.menu-item-has-children:hover a {
   color: #fff;
}

.navigation ul.menu li.menu-item ul.sub-menu li a {
   color: #ccc;
}

a, a:visited {
   color: #ccc;
   text-decoration: none;
}

a:hover {
   color: #fff !important;
}

.navigation {

width: 100%;

background-color: #333;

}

.navigation ul.menu {

background-color: #000;

padding: 0;

}

.navigation ul.menu li.menu-item {

display: inline-block;

background-color: #999;

line-height: 3rem;

position: relative;

}

.navigation ul.menu li.menu-item a {

display: block;

padding: 0 1rem;

}

.navigation ul.menu li.menu-item:hover {

background-color: #0bf;

}

.navigation ul.menu li.menu-item-has-children:hover ul.sub-menu {

display: block;

}

.navigation ul.menu li.menu-item ul.sub-menu {

position: absolute;

width: 100%;

display: none;

padding: 0;

}

.navigation ul.menu li.menu-item ul.sub-menu li {

display: block;

}

.navigation ul.menu li.menu-item-has-children:hover a {

color: #fff;

}

.navigation ul.menu li.menu-item ul.sub-menu li a {

color: #ccc;

}

a, a:visited {

color: #ccc;

text-decoration: none;

}

a:hover {

color: #fff !important;

}

Nu er menuen opbygget, og virker som den skal med hover og museklik, men for at gøre den mobilvenlig, tilføjes følgende:

jQuery indsættes før det afsluttende </head> tag (se releases.jquery.com for nyeste version), og følgende sættes ind i bunden af dokumentet, lige før det afsluttende </body> tag:

<script>
$('.menu-item-has-children').on('mouseenter touchstart', function(){
   $(this).children('.sub-menu').css({'display':'block'});
});

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

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

$('#menu-nav-header-1').on('click touchstart', function(event){
   event.stopPropagation();
});
</script>

$('.menu-item-has-children').on('mouseenter touchstart', function(){

$(this).children('.sub-menu').css({'display':'block'});

});

$('.menu-item-has-children').on('mouseleave', function(){

$(this).children('.sub-menu').css({'display':'none'});

});

$(document).on('touchstart', function(){

$('.sub-menu').css({'display':'none'});

});

$('#menu-nav-header-1').on('click touchstart', function(event){

event.stopPropagation();

});

</script>