jPanelMenu не работает должным образом в IE (все версии)
Я использую плагин jPanelMenu jQuery на одном из моих сайтов. Я заметил проблему в IE (все версии).
Когда меню срабатывает, оно скользит как положено. После выбора пункта меню страница прокручивается до нужного раздела и снова закрывается. Когда меню закрывается, правая сторона сайта получает нежелательные поля. При повторном открытии меню его половина уменьшается и снова закрывается пробел в содержании.
Вот скрипка: http://jsfiddle.net/huzLU/1/
И три скриншота, показывающие проблему в IE:
Вот код, который я использую для меню:
<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>
Также; вот ссылка на сайт: www.didson.nl
Я надеюсь, что кто-то может помочь мне, спасибо заранее!
1 ответ
РЕДАКТИРОВАТЬ: Попробуйте эту новую скрипку. Я исправил вызов setTimeout для закрытия. (На самом деле, вам вообще не нужно устанавливать время ожидания)
С уважением
Проблема связана со стилями. Это установка div с классом ".jPanelMenu-panel" в "position:lative;" что, вызывает некоторые проблемы.
В этой скрипке вы можете увидеть, как, установив абсолютное положение, решает проблему. Конечно, переход выглядит ужасно, но я позволил это вам.
HTML-код вашей версии:
<div class="jPanelMenu-panel" style="position: relative; left: 0px;">
Строка, которую я добавил:
$(".jPanelMenu-panel").css('position', 'absolute');
Надеюсь, поможет!