jPanelMenu not working properly in IE (all versions)

Question

I'm using the jPanelMenu jQuery plugin on one of my websites. I noticed a problem in IE (all versions).

When the menu is triggered, it slides in as it's supposed to. After clicking a menu item, the page scrolls to the desired section and closes again. As the menu closes, the right side of the website gets an unwanted margin. When opening the menu again, it's half it's size and closes the gap of the content again.

Here is a fiddle: http://jsfiddle.net/huzLU/1/

And three screenshots showing the problem in IE:

• http://i.stack.imgur.com/FKask.jpg
• http://i.stack.imgur.com/ItIBa.jpg
• http://i.stack.imgur.com/99s9S.jpg

Here's the code I'm using for the menu:

<script>
$(document).on('touchend',jP.panel,function(e){
e.preventDefault();
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
});

$(document).on('click',jP.panel,function(e){
e.preventDefault();
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
});
</script>

<script>
$(document).ready(function(){
var jPM = $.jPanelMenu({
closeOnContentClick: false
});
jPM.on();

$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top-50
}, 900, 'swing', function () {
window.location.hash = target;
});
setTimeout(function() {
jPM.close(true);
}, 900, 'swing');
});

});
</script>

Also; here's the link to the website: www.didson.nl

I hope someone can help me out, thanks in advance!

Answer 1

EDIT: Try this new Fiddle. I fixed the setTimeout call to close. (Actually, you wouldn't need to set a timeout at all)

Regards

The issue is related to styles. It is setting the div with class ".jPanelMenu-panel" to "position: relative;" which, is causing some issues.

In this Fiddle you can see how, by setting the position to absolute, fixes the issue. The transition looks awful, sure, but I let that up to you.

Your version's HTML:

<div class="jPanelMenu-panel" style="position: relative; left: 0px;">

The line I added:

    $(".jPanelMenu-panel").css('position', 'absolute');

Hope it helps!