Menu
(Please see this link to jsfiddle - http://jsfiddle.net/AshThomas/742tvhqy/1/)
Hi there,
If this code runs on a computer... when the menu button is clicked, the button still appears 'hovered' until the cursor is moved (i.e. if you click the button and don't move the cursor, the button still appears 'hovered')
Also, if this code is run on the Samsung Galaxy S3 Mini's standard internet browser (this could be the same for other android phones), the menu opens and then closes instantly, even though the menu button is only pressed once.
I believe these two occurrences are linked but I cannot seem to find a solution.
Basically, I am looking to stop the menu button from appearing 'hovered' once the button is clicked (and without having to move the cursor) and I would like the menu to stay open when the menu button is pressed on the phone mentioned above... hopefully these two problems are related!
<body>
<div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed;
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease;
transition: right 300ms ease; right: -15.625em; -webkit-overflow-scrolling: touch;">
<div id="menuWrapper">
<ul>
<li class="boldMenu"><a href="#">Home</a>
</li>
<li class="boldMenu"><a href="#">About</a>
</li>
<li class="boldMenu"><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">
<a href="#menu" class="menu-link">☰</a>
</div>
224
asked Jan 01 '26 09:01
I've fixed your issue. I guess it's a bug of browser, because it's not re-rendering DOM elements after animation.
http://jsfiddle.net/742tvhqy/4/
Check out line #104
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
You see that last line with fadeOut/fadeIn? That's the fix. I've tried with hide().show(); but it's not working, even if i use fadeOut(1) it's not working :) But common, 5ms is same as 1ms. I can't think any better solution right now. It works.
BTW. In your place I would just do all this stuff with few lines of jQuery code instead of all that fancy css animation stuff..
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
