i want to use this code in wordpress. The first code shows the working code. The second code shows how it is displayed in WordPress when I use this position <?php wp_nav_menu (array ('menu_id' => 'main-nav',)); ?> it is packed in the ul but it has to be represented as above around the code in the surrounding container.
- 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();#main-nav ul { list-style: none; margin: 0; padding: 0; }
#main-nav ul li { display: inline-block; margin: 0 1em 0 1em; padding: 0.35em 0.75em 0.35em 0.75em; border-radius: 0.5em; }
#main-nav ul li.active { background: #999; }
#main-nav ul li.active a { color: #fff; text-decoration: none; }
.dropotron { background: #444; border-radius: 0.5em; list-style: none; margin: 0; min-width: 10em; padding: 0.75em 1em 0.75em 1em; }
.dropotron > li { border-top: solid 1px #555; margin: 0; padding: 0; }
.dropotron > li:first-child { border-top: 0; }
.dropotron > li > a { color: #ccc; display: block; padding: 0.5em 0 0.5em 0; text-decoration: none; }
.dropotron > li.active > a, .dropotron > li:hover > a { color: #fff; }
.dropotron.level-0 { margin-top: 1.25em; }
.dropotron.level-0:before { content: ''; position: absolute; border-bottom: solid 0.5em #444; border-left: solid 0.5em transparent; border-right: solid 0.5em transparent; top: -0.5em; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
<div id="main-nav">
<ul id="menu-top-menu">
<li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-511"><a href="http://localhost/test/">Test</a>
<ul class="sub-menu">
<li id="menu-item-513" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"><a href="http://localhost/test/">Test</a></li>
</ul>
</li>
<li id="menu-item-512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"><a href="http://localhost/test/">Test</a></li>
</ul>
</div>
</nav>- Code
<nav>
<div class="menu-top-menu-container">
<ul id="main-nav" class="menu">
<li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-511"><a href="#">Test</a>
<ul class="sub-menu">
<li id="menu-item-513" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"><a href="#">Test</a></li>
</ul>
</li>
<li id="menu-item-512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"><a href="#">Test</a></li>
</ul>
</div>
</nav>this is the code that is output when the php code is placed in the desired position. Wrong: <div class = "menu-top-menu-container"><ul id = "main-nav" class = "menu"> Correct: <div id = "main-nav" class = "menu-top-menu-container"><ul class = "menu"> This is what the code should look like . the code would work in the surrounding container
Advertisement
Answer
- Replace
menu_idtocontainer_id. - Change
menu_idvaluemenu-top-menu. - Finale code
<?php wp_nav_menu( [ 'container_id' => 'main-nav', 'menu_id' => 'menu-top-menu'] ); ?>
Source : https://developer.wordpress.org/reference/functions/wp_nav_menu/