Hallo,
hab auf einer Seite das js Script Lavalamp für das Menü im Einstz das auch soweit gut funktioniert, die Leiste verfolgt die Maus.
Jetz habe ich aber ein Problem das ich selber nicht lösen kann weil mein JS sehr schlecht ist, und zwar...
Wenn ich einen Menüpunkt in meinem CMS System auf "in Menü verbergen" stelle weis die Lavalamp nicht mehr was sie machen soll, weil sie ja den Menüpunkt nicht findet. Das möchte ich gerne so abändern, das wenn kein Menüpunkt gefunden wird die LavaLamp auf den Home Menüpunkt zurückfäht und keine Fehlermeldung in der Console ausgiebt.
Nur wie stell ich das an?
Hie mal der LavaLamp.js Code eventuell hat ja jemend von Euch eine Ahnung wie das funktioniert und kann mir sagen und zeigen wie das geht.
Danke schon mal im Voraus.
hab auf einer Seite das js Script Lavalamp für das Menü im Einstz das auch soweit gut funktioniert, die Leiste verfolgt die Maus.
Jetz habe ich aber ein Problem das ich selber nicht lösen kann weil mein JS sehr schlecht ist, und zwar...
Wenn ich einen Menüpunkt in meinem CMS System auf "in Menü verbergen" stelle weis die Lavalamp nicht mehr was sie machen soll, weil sie ja den Menüpunkt nicht findet. Das möchte ich gerne so abändern, das wenn kein Menüpunkt gefunden wird die LavaLamp auf den Home Menüpunkt zurückfäht und keine Fehlermeldung in der Console ausgiebt.
Nur wie stell ich das an?
Hie mal der LavaLamp.js Code eventuell hat ja jemend von Euch eine Ahnung wie das funktioniert und kann mir sagen und zeigen wie das geht.
Danke schon mal im Voraus.
HTML:
/**************************************/
/* LavaLamp Menü
/**************************************/
(function($) {
$.fn.lavalamp = function(options) {
options = $.extend({
speed: 500,
reset: 0,
color: 'none',
radius: 0,
easing: null
}, options);
return this.each(function() {
var nav = $(this),
current = nav.children('.active'),
lavalamp;
// create the lavalamp item
nav.children('.lavalamp').remove();
$('<li class="lavalamp hidden-xs"></li>').css({
width : current.width(),
height : nav.height(),
left : parseInt(current.position().left),
backgroundColor : options.color,
borderRadius: options.radius
}).appendTo(this);
lavalamp = nav.children('.lavalamp');
// reusable options
var opts = {
duration: options.speed,
easing: options.easing,
queue: false
};
// trigger the lavalamp on mouseover and mouseleave
var reset;
nav.children('li:not(.lavalamp)').hover(function () {
// mouse over
clearTimeout(reset);
lavalamp.animate({
width: $(this).width(),
left: $(this).position().left,
}, opts);
}, function () {
// mouse out
if (window.innerWidth > 768) {
$(this).trigger('click').children('a').blur();
}
reset = setTimeout(function () {
lavalamp.animate({
width: current.width(),
left: current.position().left
}, opts)
}, options.reset);
});
// zero bottom radius if dropdown is shown
nav.on('show.bs.dropdown', function() {
lavalamp.css({
'border-bottom-left-radius': 0,
'border-bottom-right-radius': 0
})
});
// reset borser radius if dropdown is hidden
nav.on('hide.bs.dropdown', function() {
lavalamp.css({
'border-radius': options.radius
})
});
}); // end each
};
})(jQuery);
Zuletzt bearbeitet von einem Moderator: