Nicht mehr ganz neu hier
Hallo zusammen, Ich habe lokal ein Wordpress theme erstellt. Da habe ich eine Nav mit diesen Code von ajlkn eingefügt:
Das klappt hervorragend bis auf eine Sache: Auf der Startseite wird das mobile Menü doppelt angezeigt. Also wenn ich das eine Panel ausblende befindet sich dahinter das nächste. Welches sich wieder ausblenden lässt. Meine Vermutung war, dass sowohl auf die index.php als auch auf die page.php zugegriffen wird und somit doppelt erscheint. Selbst wenn ich den nav Part nur in die page.php integriere bleibt das Problem bestehen. Hatte vielleicht jemand schon mal ein ähnliches Problem? Vielen Dank für eure Hilfe. Liebe Grüße
Code:
/* jquery.dropotron.js v1.4.3 | (c) @ajlkn | github.com/ajlkn/jquery.dropotron | MIT licensed */
(function ($) {
// Disables selection.
$.fn.disableSelection_dropotron = function () {
return $(this).css('user-select', 'none').css('-khtml-user-select', 'none').css('-moz-user-select', 'none').css('-o-user-select', 'none').css('-webkit-user-select', 'none');
}
// Dropotron prototype method.
$.fn.dropotron = function (options) {
if (this.length == 0)
return $(this);
if (this.length > 1)
for (var i = 0; i < this.length; i++)
$(this[i]).dropotron(options);
return $.dropotron($.extend({
selectorParent: $(this)
}, options));
}
// Dropotron method.
$.dropotron = function (options) {
// Settings.
var settings = $.extend({
// Parent jQuery object.
selectorParent: null,
// Base Z-Index.
baseZIndex: 1000,
// Menu class (assigned to every <ul>).
menuClass: 'dropotron',
// Expansion mode ("hover" or "click").
expandMode: 'hover',
// Hover delay (in ms).
hoverDelay: 150,
// Hide delay (in ms; 0 disables).
hideDelay: 250,
// Opener class.
openerClass: 'opener',
// Active opener class.
openerActiveClass: 'active',
// Submenu class prefix.
submenuClassPrefix: 'level-',
// Menu mode ("instant", "fade", "slide", "zoom").
mode: 'fade',
// Menu speed ("fast", "slow", or ms).
speed: 'fast',
// Easing mode ("swing", "linear").
easing: 'swing',
// Alignment ("left", "center", "right").
alignment: 'left',
// Submenu offset X.
offsetX: 0,
// Submenu offset Y.
offsetY: 0,
// Global offset Y.
globalOffsetY: 0,
// IE Offset X.
IEOffsetX: 0,
// IE Offset Y.
IEOffsetY: 0,
// If true and mode = "fade", prevents top-level opener fade.
noOpenerFade: true,
// Detach second level menus (prevents parent style bleed).
detach: true,
// If true and detach = true, leave original menu intact.
cloneOnDetach: true
}, options);
// Vars.
var $top = settings.selectorParent,
$menus = $top.find('ul'),
$body = $('body'),
$bodyhtml = $('body,html'),
$window = $(window);
var isLocked = false,
hoverTimeoutId = null,
hideTimeoutId = null;
// Main.
// Top.
$top
.on('doCollapseAll', function () {
$menus.trigger('doCollapse');
});
// Top level menus.
$menus.each(function () {
var $menu = $(this),
$opener = $menu.parent();
// If a hideDelay is set, set up the event.
if (settings.hideDelay > 0)
$menu.add($opener)
.on('mouseleave', function (e) {
window.clearTimeout(hideTimeoutId);
hideTimeoutId = window.setTimeout(function () {
$menu.trigger('doCollapse');
}, settings.hideDelay);
});
// Menu.
$menu
.disableSelection_dropotron()
.hide()
.addClass(settings.menuClass)
.css('position', 'absolute')
.on('mouseenter', function (e) {
window.clearTimeout(hideTimeoutId);
})
.on('doExpand', function () {
// Already visible? Bail out.
if ($menu.is(':visible'))
return false;
// Reset our "hide" timeout.
window.clearTimeout(hideTimeoutId);
// Collapse everything but this menu.
$menus.each(function () {
var $this = $(this);
if (!$.contains($this.get(0), $opener.get(0)))
$this.trigger('doCollapse');
});
// Vars.
var oo = $opener.offset(),
op = $opener.position(),
opp = $opener.parent().position(),
ow = $opener.outerWidth(),
mw = $menu.outerWidth(),
isTL = ($menu.css('z-index') == settings.baseZIndex);
var x, c, left, top;
// If this is a top level menu ...
if (isTL) {
// If detach is enabled, use .position()
if (!settings.detach)
x = op;
// Otherwise, use .offset()
else
x = oo;
top = x.top + $opener.outerHeight() + settings.globalOffsetY;
c = settings.alignment;
// Remove alignment classes.
$menu
.removeClass('left')
.removeClass('right')
.removeClass('center');
// Figure out alignment and position.
switch (settings.alignment) {
case 'right':
left = x.left - mw + ow;
if (left < 0) {
left = x.left;
c = 'left';
}
break;
case 'center':
left = x.left - Math.floor((mw - ow) / 2);
if (left < 0) {
left = x.left;
c = 'left';
} else if (left + mw > $window.width()) {
left = x.left - mw + ow;
c = 'right';
}
break;
case 'left':
default:
left = x.left;
if (left + mw > $window.width()) {
left = x.left - mw + ow;
c = 'right';
}
break;
}
// Add alignment class.
$menu.addClass(c);
}
// Otherwise, we're dealing with a submenu.
else {
// If the opener position isn't static ...
if ($opener.css('position') == 'relative'
|| $opener.css('position') == 'absolute') {
top = settings.offsetY;
left = (-1 * op.left);
} else {
top = op.top + settings.offsetY;
left = 0;
}
// Figure out position (based on alignment).
switch (settings.alignment) {
case 'right':
left += (-1 * $opener.parent().outerWidth()) + settings.offsetX;
break;
case 'center':
case 'left':
default:
left += $opener.parent().outerWidth() + settings.offsetX;
break;
}
}
// Legacy IE? Apply IE-specific offsets.
if (navigator.userAgent.match(/MSIE ([0-9]+)\./) && RegExp.$1 < 8) {
left += settings.IEOffsetX;
top += settings.IEOffsetY;
}
// Position and show the menu.
$menu
.css('left', left + 'px')
.css('top', top + 'px')
.css('opacity', '0.01')
.show();
// Kludge!
var tmp = false;
// Non-static position fix.
if ($opener.css('position') == 'relative'
|| $opener.css('position') == 'absolute')
left = (-1 * op.left);
else
left = 0;
if ($menu.offset().left < 0) {
left += $opener.parent().outerWidth() - settings.offsetX;
tmp = true;
} else if ($menu.offset().left + mw > $window.width()) {
left += (-1 * $opener.parent().outerWidth()) - settings.offsetX;
tmp = true;
}
if (tmp)
$menu
.css('left', left + 'px');
$menu
.hide()
.css('opacity', '1');
// Figure out animation mode.
switch (settings.mode) {
case 'zoom':
isLocked = true;
$opener.addClass(settings.openerActiveClass);
$menu.animate({
width: 'toggle',
height: 'toggle'
}, settings.speed, settings.easing, function () {
isLocked = false;
});
break;
case 'slide':
isLocked = true;
$opener.addClass(settings.openerActiveClass);
$menu.animate({
height: 'toggle'
}, settings.speed, settings.easing, function () {
isLocked = false;
});
break;
case 'fade':
isLocked = true;
if (isTL && !settings.noOpenerFade) {
var tmp;
if (settings.speed == 'slow')
tmp = 80;
else if (settings.speed == 'fast')
tmp = 40;
else
tmp = Math.floor(settings.speed / 2);
$opener.fadeTo(tmp, 0.01, function () {
$opener.addClass(settings.openerActiveClass);
$opener.fadeTo(settings.speed, 1);
$menu.fadeIn(settings.speed, function () {
isLocked = false;
});
});
} else {
$opener.addClass(settings.openerActiveClass);
$opener.fadeTo(settings.speed, 1);
$menu.fadeIn(settings.speed, function () {
isLocked = false;
});
}
break;
case 'instant':
default:
$opener.addClass(settings.openerActiveClass);
$menu.show();
break;
}
return false;
})
.on('doCollapse', function () {
// Not visible? Bail out.
if (!$menu.is(':visible'))
return false;
// Collapse the menu.
$menu.hide();
$opener.removeClass(settings.openerActiveClass);
$menu.find('.' + settings.openerActiveClass).removeClass(settings.openerActiveClass);
$menu.find('ul').hide();
return false;
})
.on('doToggle', function (e) {
if ($menu.is(':visible'))
$menu.trigger('doCollapse');
else
$menu.trigger('doExpand');
return false;
});
// Menu's opener.
$opener
.disableSelection_dropotron()
.addClass('opener')
.css('cursor', 'pointer')
.on('click touchend', function (e) {
// Locked? Bail.
if (isLocked)
return;
// Toggle menu.
e.preventDefault();
e.stopPropagation();
$menu.trigger('doToggle');
});
// If expandMode is "hover", set up the event.
if (settings.expandMode == 'hover')
$opener.hover(function (e) {
if (isLocked)
return;
hoverTimeoutId = window.setTimeout(function () {
$menu.trigger('doExpand');
}, settings.hoverDelay);
},
function (e) {
window.clearTimeout(hoverTimeoutId);
});
});
// All links.
$menus.find('a')
.css('display', 'block')
.on('click touchend', function (e) {
// Locked? Bail.
if (isLocked)
return;
// No href? Prevent default.
if ($(this).attr('href').length < 1)
e.preventDefault();
});
// All list items.
$top.find('li')
.css('white-space', 'nowrap')
.each(function () {
var $this = $(this),
$a = $this.children('a'),
$ul = $this.children('ul'),
href = $a.attr('href');
// If href is blank ("") or a hash (#), prevent the link from doing anything.
$a.on('click touchend', function (e) {
if (href.length == 0
|| href == '#')
e.preventDefault();
else
e.stopPropagation();
});
// If there is a link but no unordered list ...
if ($a.length > 0 && $ul.length == 0)
$this.on('click touchend', function (e) {
if (isLocked)
return;
$top.trigger('doCollapseAll');
e.stopPropagation();
});
});
// Top level list items.
$top.children('li').each(function () {
var $opener = $(this),
$menu = $opener.children('ul'),
c;
if ($menu.length > 0) {
// If we're using detach ...
if (settings.detach) {
// If we're cloning on detach ...
if (settings.cloneOnDetach) {
// Make a copy of the menu.
c = $menu.clone();
// Leave it behind
c
.attr('class', '')
.hide()
.appendTo($menu.parent());
}
// Detach the menu and move it to the end of the <body> element.
$menu
.detach()
.appendTo($body);
}
// Step through menus, assigning z-indexes and submenu class prefixes as necessary.
for (var z = settings.baseZIndex, i = 1, y = $menu; y.length > 0; i++) {
y.css('z-index', z++);
if (settings.submenuClassPrefix)
y.addClass(settings.submenuClassPrefix + (z - 1 - settings.baseZIndex));
y = y.find('> li > ul');
}
}
});
// Window.
$window
.on('scroll', function () {
$top.trigger('doCollapseAll');
})
.on('keypress', function (e) {
// Collapse all menus if the user hits escape.
if (!isLocked && e.keyCode == 27) {
e.preventDefault();
$top.trigger('doCollapseAll');
}
});
// Body.
$bodyhtml
.on('click touchend', function () {
if (!isLocked)
$top.trigger('doCollapseAll');
});
};
})(jQuery);
var foo = $('#main-nav > ul');
foo.dropotron();Das klappt hervorragend bis auf eine Sache: Auf der Startseite wird das mobile Menü doppelt angezeigt. Also wenn ich das eine Panel ausblende befindet sich dahinter das nächste. Welches sich wieder ausblenden lässt. Meine Vermutung war, dass sowohl auf die index.php als auch auf die page.php zugegriffen wird und somit doppelt erscheint. Selbst wenn ich den nav Part nur in die page.php integriere bleibt das Problem bestehen. Hatte vielleicht jemand schon mal ein ähnliches Problem? Vielen Dank für eure Hilfe. Liebe Grüße
