Menu déroulant avec lien sur le parent compatible touch screen

by oilvier

HTML

<div class="main">
            <ul class="nav nav-children">
                <li class="has-children" aria-haspopup="true">
                    <a href="http://alteo.fr">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="http://alteo.fr">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="http://alteo.fr">Item</a>
                    <ul class="children">
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                        <li><a href="http://www.google.fr">Sub-item</a></li>
                    </ul>
                </li>
                <li class="has-children" aria-haspopup="true">
                    <a href="http://alteo.fr">Item</a>
                    <ul...

CSS

* {margin:0; padding:0;}
            li {list-style:none; background:red;}
            body {padding:20px; font-family:Arial; font-size:62.5%;}
            
            a {padding:15px; background:beige;}
            
            .nav {font-size:0; text-align: left;}
            .nav > li, .nav > li > a {display:inline-block; font-size: 1.4rem;}

            /* Navigation verticale */
            .nav-vertical > li,
            .children > li {display:list-item;}

            /* Trigger sous-menu */
            .has-children {position:relative;}
                /* Sous-menu */
                .nav-children .children {position:absolute; top:100%; left:-99999em;}
                    .nav-children .children > li {min-width:200px; float:left;}
                        .nav-children .children > li > a {display:block;}

            /* Apparition sous-menu */
            .nav-children .has-children:hover > .children {left:0;}
            /* Second niveau */
            .nav-children .children .has-children:hover > .children {top:0; left:100%;}

            .main {position: relative; z-index:2; width: auto; min-width:960px;}


.is-active > a {color:green;}

JavaScript

$('.has-children').on('mouseover', function() {
    $(this).addClass('is-active');
}).on('mouseout', function() {
    $(this).removeClass('is-active');
});

$('.has-children > a').on('touchstart', function() {
    var parent = $(this).closest(".has-children"),
        isActive = parent.hasClass("is-active");
    $('.has-children').removeClass('is-active');
    !isActive && parent.addClass("is-active");
    return false
});