Я использую плагин jquery под названием dlmenu для создания многоуровневого меню и barba.js для создания плавного перехода между страницами, мой js работает нормально без barba, когда я добавляю barba, плагин меню не работает, вот мой код:
, и внутри головы есть такой скрипт:
<head>
<script src="/assets/scripts/vendor/modernizr.custom.js"></script>
</head>
а вот мой js:
// Menu
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { classin : 'dl-animate-in-4', classout : 'dl-animate-out-4' }
});
});
// Barba js ( To create fluid and smooth transitions between pages. )
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
* Please note, newContainer is available just after newContainerLoading is resolved!
*/
$(window).scrollTop(0);
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
$el.animate({ opacity: 1 }, 400, function() {
/**
* Do not forget to call .done() as soon your transition is finished!
* .done() will automatically remove from the DOM the old Container
*/
_this.done();
});
}
});
/**
* Next step, you have to tell Barba to use the new Transition
*/
Barba.Pjax.getTransition = function() {
var tl = new TimelineMax();
tl.to(".screen-wipe-top", 0.5, {y: "50%", repeat: 1, yoyo: true})
tl.to(".screen-wipe-bottom", 0.5, {y: "-50%", repeat: 1, yoyo: true}, "-=1")
/**
* Here you can use your own logic!
* For example you can use different Transition based on the current page or link...
*/
return FadeTransition;
};
Barba.Pjax.start();
Когда я удаляю код barba.js, код меню будет работать нормально, также есть еще одна проблема с barba.js на мобильном телефоне, когда я открываю любую страницу, которую он не делаетс самого начала я добавил это в barba.js, но он работает только на рабочем столе:
$(window).scrollTop(0);