CODEWITHSUNDEEP
ioscssdrop-down-menumenutouch
TomD
TomD

Reputation: 181

ul > li:hover .sub-menu { display: block; } - To get working on iPad?

<li class="menu-item menu-item-has-children"><a href="/us/">About Us</a>
 <ul class="sub-menu">
   <li class="menu-item"><a href="meet-team/">Meet the team</a></li>
   <li class="menu-item"><a href="/history/">Our History</a></li>
 </ul>
</li>

The above has a CSS solution to display the .sub-menu which works fine on desktop:

.ul li:hover .sub-menu { display:block; }
.sub-menu { display:none; }

However, as the parent li have links, on IOS devices when clicking on the parent link to display a sub-menu, the page loads the parent link, missing out the sub-menu.

Ideally on an Ipad, I would like to tap once to open up the sub-menu, then tap again on the same link to go to the parent link. Or tap on the sub-menu item once displayed.

Upvotes: 0

Views: 1552

Answers (1)

Anon
Anon

Reputation: 2874

You can try place pseudo-element before <a> and remove them on click for mobile devices:
HTML:

<ul>
<li class="menu-item menu-item-has-children"><a href="/us/">About Us</a>
 <ul class="sub-menu">
   <li class="menu-item"><a href="meet-team/">Meet the team</a></li>
   <li class="menu-item"><a href="/history/">Our History</a></li>
 </ul>
</li>
</ul>

CSS:

li:hover .sub-menu { display:block; }
.sub-menu { display:none; }
@media only screen and (max-device-width : 1024px){
    li.menu-item-has-children { position:relative; }
    li.menu-item-has-children:before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:100;
    }
    li.menu-item-has-children.clicked:before{display:none;}
}

JQ:

$(document).on('click', '.menu-item.menu-item-has-children', function(){
    if (window.innerWidth<1024){
        $(this).toggleClass('clicked')
    }
})

DEMO

Upvotes: 1

Related Questions