I'm using the Slicknav mobile menu script: http://slicknav.com/
And it's working great except I can't figure out how to get it to close when one clicks outside of the menu on ios devices. It closes fine when clicking outside when I test it on desktop and Android, but on my Ipad it's not working. Here's the current code. Any insight? Thank you!
<script src="slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').slicknav({
label:'',
closeOnClick:true
});
$('.slicknav_menu').focusout(function(event){
$('.menu').slicknav('close');
});
});
</script>
<nav>
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
</ul>
</nav>
On my site the right menu uses slicknav. It closes fine when i click outside on iOS thanks to this code. Demonstration : http://www.crealisationweb.fr
Replace this:
With this :
I used something like this
I remember creating my first mobile website and this issue killed so much time. iOS has a known issue with
:hover
state when clicked.Read up here - it should fix your issue.