0
我的下拉菜单与移动视图中的导航菜单重叠，我想知道是否有人知道如何解决此问题。这将不胜感激！ 此外，在桌面视图中，有人知道我将鼠标悬停在我的下拉列表上时如何展开标题，以便它不会脱离标题？下拉菜单与其他导航项重叠
(function ($, document, window) {
var
defaults = {
label: 'MENU',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
\t \t \t brand: '',
animations: 'jquery',
init: function() {},
beforeOpen: function() {},
beforeClose: function() {},
afterOpen: function() {},
afterClose: function() {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav',
Keyboard = {
DOWN: 40,
ENTER: 13,
ESCAPE: 27,
LEFT: 37,
RIGHT: 39,
SPACE: 32,
TAB: 9,
UP: 38,
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) {
this.settings.removeIds = false;
}
this._defaults = defaults;
this._name = mobileMenu;
this.init();
}
Plugin.prototype.init = function() {
var $this = this,
menu = $(this.element),
settings = this.settings,
iconClass,
menuBar;
if (settings.duplicate) {
$this.mobileNav = menu.clone();
} else {
$this.mobileNav = menu;
}
if (settings.removeIds) {
$this.mobileNav.removeAttr('id');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('id');
});
}
if (settings.removeClasses) {
$this.mobileNav.removeAttr('class');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('class');
});
}
if (settings.removeStyles) {
$this.mobileNav.removeAttr('style');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('style');
});
}
iconClass = prefix + '_icon';
if (settings.label === '') {
iconClass += ' ' + prefix + '_no-text';
}
if (settings.parentTag == 'a') {
settings.parentTag = 'a href="#"';
}
$this.mobileNav.attr('class', prefix + '_nav');
menuBar = $('<div class="' + prefix + '_menu"></div>');
\t \t if (settings.brand !== '') {
\t \t \t var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
\t \t \t $(menuBar).append(brand);
\t \t }
$this.btn = $(
['<' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
'<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
'<span class="' + iconClass + '">',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'</span>',
'</' + settings.parentTag + '>'
].join('')
);
$(menuBar).append($this.btn);
if(settings.appendTo !== '') {
$(settings.appendTo).append(menuBar);
} else {
$(settings.prependTo).prepend(menuBar);
}
menuBar.append($this.mobileNav);
var items = $this.mobileNav.find('li');
$(items).each(function() {
var item = $(this),
data = {};
data.children = item.children('ul').attr('role', 'menu');
item.data('menu', data);
if (data.children.length > 0) {
var a = item.contents(),
containsAnchor = false,
nodes = [];
$(a).each(function() {
if (!$(this).is('ul')) {
nodes.push(this);
} else {
return false;
}
if($(this).is("a")) {
containsAnchor = true;
}
});
var wrapElement = $(
'<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
);
if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
var $wrap = $(nodes).wrapAll(wrapElement).parent();
$wrap.addClass(prefix+'_row');
} else
$(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();
if (!settings.showChildren) {
item.addClass(prefix+'_collapsed');
} else {
item.addClass(prefix+'_open');
}
item.addClass(prefix+'_parent');
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
arrowElement = arrowElement.wrap(wrapElement).parent();
$(nodes).last().after(arrowElement);
} else if (item.children().length === 0) {
item.addClass(prefix+'_txtnode');
}
item.children('a').attr('role', 'menuitem').click(function(event){
//Ensure that it's not a parent
if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
//Emulate menu close if set
$($this.btn).click();
}
});
if (settings.closeOnClick && settings.allowParentLinks) {
item.children('a').children('a').click(function (event) {
$($this.btn).click();
});
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
$($this.btn).click();
});
}
});
$(items).each(function() {
var data = $(this).data('menu');
if (!settings.showChildren){
$this._visibilityToggle(data.children, null, false, null, true);
}
});
$this._visibilityToggle($this.mobileNav, null, false, 'init', true);
$this.mobileNav.attr('role','menu');
$(document).mousedown(function(){
$this._outlines(false);
});
$(document).keyup(function(){
$this._outlines(true);
});
$($this.btn).click(function (e) {
e.preventDefault();
$this._menuToggle();
});
$this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
e.preventDefault();
$this._itemClick($(this));
});
$($this.btn).keydown(function (e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
case Keyboard.SPACE:
case Keyboard.DOWN:
e.preventDefault();
if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
$this._menuToggle();
} $($this.btn).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
e.preventDefault();
$this._itemClick($(e.target));
break;
case Keyboard.RIGHT:
e.preventDefault();
if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
$this._itemClick($(e.target));
}
$(e.target).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
var ev = e || event;
switch(ev.keyCode){
case Keyboard.DOWN:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index(e.target);
var nextIdx = idx + 1;
if (allItems.length <= nextIdx) {
nextIdx = 0;
}
var next = allItems.eq(nextIdx);
next.focus();
break;
case Keyboard.UP:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index(e.target);
var next = allItems.eq(idx - 1);
next.focus();
break;
case Keyboard.LEFT:
e.preventDefault();
if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
var parent = $(e.target).parent().parent().prev();
parent.focus();
$this._itemClick(parent);
} else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
$this._menuToggle();
$($this.btn).focus();
}
break;
case Keyboard.ESCAPE:
e.preventDefault();
$this._menuToggle();
$($this.btn).focus();
break;
}
});
// allow links clickable within parent tags if set
if (settings.allowParentLinks && settings.nestedParentLinks) {
$('.'+prefix+'_item a').click(function(e){
e.stopImmediatePropagation();
});
}
};
//toggle menu
Plugin.prototype._menuToggle = function (el) {
var $this = this;
var btn = $this.btn;
var mobileNav = $this.mobileNav;
if (btn.hasClass(prefix+'_collapsed')) {
btn.removeClass(prefix+'_collapsed');
btn.addClass(prefix+'_open');
} else {
btn.removeClass(prefix+'_open');
btn.addClass(prefix+'_collapsed');
}
btn.addClass(prefix+'_animating');
$this._visibilityToggle(mobileNav, btn.parent(), true, btn);
};
// toggle clicked items
Plugin.prototype._itemClick = function (el) {
var $this = this;
var settings = $this.settings;
var data = el.data('menu');
if (!data) {
data = {};
data.arrow = el.children('.'+prefix+'_arrow');
data.ul = el.next('ul');
data.parent = el.parent();
//Separated parent link structure
if (data.parent.hasClass(prefix+'_parent-link')) {
data.parent = el.parent().parent();
data.ul = el.parent().next('ul');
}
el.data('menu', data);
}
if (data.parent.hasClass(prefix+'_collapsed')) {
data.arrow.html(settings.openedSymbol);
data.parent.removeClass(prefix+'_collapsed');
data.parent.addClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
} else {
data.arrow.html(settings.closedSymbol);
data.parent.addClass(prefix+'_collapsed');
data.parent.removeClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
}
};
// toggle actual visibility and accessibility tags
Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
var $this = this;
var settings = $this.settings;
var items = $this._getActionItems(el);
var duration = 0;
if (animate) {
duration = settings.duration;
}
function afterOpen(trigger, parent) {
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire afterOpen callback
if (!init) {
settings.afterOpen(trigger);
}
}
function afterClose(trigger, parent) {
el.attr('aria-hidden','true');
items.attr('tabindex', '-1');
$this._setVisAttr(el, true);
el.hide(); //jQuery 1.7 bug fix
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire init or afterClose callback
if (!init){
settings.afterClose(trigger);
} else if (trigger == 'init'){
settings.init();
}
}
if (el.hasClass(prefix+'_hidden')) {
el.removeClass(prefix+'_hidden');
//Fire beforeOpen callback
if (!init) {
settings.beforeOpen(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
afterOpen(trigger, parent);
});
} else if(settings.animations === 'velocity') {
el.velocity("finish").velocity("slideDown", {
duration: duration,
easing: settings.easingOpen,
complete: function() {
afterOpen(trigger, parent);
}
});
}
el.attr('aria-hidden','false');
items.attr('tabindex', '0');
$this._setVisAttr(el, false);
} else {
el.addClass(prefix+'_hidden');
//Fire init or beforeClose callback
if (!init){
settings.beforeClose(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
afterClose(trigger, parent)
});
} else if (settings.animations === 'velocity') {
el.velocity("finish").velocity("slideUp", {
duration: duration,
easing: settings.easingClose,
complete: function() {
afterClose(trigger, parent);
}
});
}
}
};
// set attributes of element and children based on visibility
Plugin.prototype._setVisAttr = function(el, hidden) {
var $this = this;
// select all parents that aren't hidden
var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
// iterate over all items setting appropriate tags
if (!hidden) {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','false');
var items = $this._getActionItems(ul);
items.attr('tabindex', '0');
$this._setVisAttr(ul, hidden);
});
} else {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','true');
var items = $this._getActionItems(ul);
items.attr('tabindex', '-1');
$this._setVisAttr(ul, hidden);
});
}
};
// get all 1st level items that are clickable
Plugin.prototype._getActionItems = function(el) {
var data = el.data("menu");
if (!data) {
data = {};
var items = el.children('li');
var anchors = items.find('a');
data.links = anchors.add(items.find('.'+prefix+'_item'));
el.data('menu', data);
}
return data.links;
};
Plugin.prototype._outlines = function(state) {
if (!state) {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
} else {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
}
};
Plugin.prototype.toggle = function(){
var $this = this;
$this._menuToggle();
};
Plugin.prototype.open = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_collapsed')) {
$this._menuToggle();
}
};
Plugin.prototype.close = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_open')) {
$this._menuToggle();
}
};
$.fn[mobileMenu] = function (options) {
var args = arguments;
// Is the first parameter an object (options), or was omitted, instantiate a new instance
if (options === undefined || typeof options === 'object') {
return this.each(function() {
// Only allow the plugin to be instantiated once due to methods
if (!$.data(this, 'plugin_' + mobileMenu)) {
// if it has no instance, create a new one, pass options to our plugin constructor,
// and store the plugin instance in the elements jQuery data object.
$.data(this, 'plugin_' + mobileMenu, new Plugin(this, options));
}
});
// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
// Cache the method call to make it possible to return a value
var returns;
this.each(function() {
var instance = $.data(this, 'plugin_' + mobileMenu);
// Tests that there's already a plugin-instance and checks that the requested public method exists
if (instance instanceof Plugin && typeof instance[options] === 'function') {
// Call the method of our plugin instance, and pass it the supplied arguments.
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
}
});
// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
return returns !== undefined ? returns : this;
}
};
}(jQuery, document, window));.dropdown{
\t overflow: hidden;
}
.dropdown .dropbtn {
\t background-color: inherit;
}
.dropdown-content{
\t display: none;
\t position: absolute;
}
.dropdown-content a{
\t float:none;
\t display: block;
}
.dropdown:hover .dropdown-content{
\t display:block;
}
.dropbtn{
\t border:none;
\t font-family: 'Philosopher', sans-serif;
\t z-index: 3000;
}
header{
\t \t list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
@media (max-width: 400px) {
\t .slicknav_menu{
\t display:block; \t
}
header{
\t \t list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
\t #menu{
\t \t display:none;
\t \t z-index: 1000; \t
\t }
\t .slicknav_menu img{
\t \t display:none;
\t \t z-index: 1000;
\t }
}
.main-nav {
display: flex;
\t padding-left: 0;
\t font-family: 'Philosopher', sans-serif;
\t padding-left:20px;
\t padding-right:40px;
\t }
.main-nav a:after{
\t content: attr(data-txthover);
max-width: 100%;
color: white;
white-space: nowrap;
overflow: hidden;
transition: max-width .3s ease-out;
}
.main-nav li:first-child {
margin-right: auto;
}
.main-nav a {
\t color: #1FA0A3;
\t padding: 10px;
\t text-decoration: none;
\t font-size: 20px;
\t transition: all .3s;
}
@media only screen and (min-width: 760px) {
.slicknav_menu{
\t display:none;
}
}
@media (max-width: 760px){
\t .slicknav_menu{
\t \t display:block;
\t }
\t #menu{
\t \t display:none;
\t }
\t .slicknav_menu img{
\t \t display:none;
\t \t z-index: 1000;
\t }
.slicknav_btn {
position: relative;
display: block;
vertical-align: middle;
float: right;
padding: 0.438em 0.625em 0.438em 0.625em;
line-height: 1.125em;
cursor: pointer; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0.188em; }
.slicknav_menu {
\t z-index: 1000;
*zoom: 1; }
.slicknav_menu .slicknav_menutxt {
display: block;
line-height: 1.188em;
float: left; }
.slicknav_menu .slicknav_icon {
float: left;
width: 1.125em;
height: 0.875em;
margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_icon:before {
background: transparent;
width: 1.125em;
height: 0.875em;
display: block;
content: "";
position: absolute; }
.slicknav_menu .slicknav_no-text {
margin: 0; }
.slicknav_menu .slicknav_icon-bar {
display: block;
width: 1.125em;
height: 0.125em;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_menu:before {
content: " ";
display: table; }
.slicknav_menu:after {
content: " ";
display: table;
clear: both; }
.slicknav_nav {
clear: both; }
.slicknav_nav ul {
display: block; }
.slicknav_nav li {
display: block; }
.slicknav_nav .slicknav_arrow {
font-size: 0.8em;
margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item {
cursor: pointer; }
.slicknav_nav .slicknav_item a {
display: inline; }
.slicknav_nav .slicknav_row {
display: block; }
.slicknav_nav a {
display: block; }
.slicknav_nav .slicknav_parent-link a {
display: inline; }
.slicknav_brand {
float: left; }
.slicknav_menu {
\t top:0;
\t width: 100%;
\t position:fixed;
font-size: 16px;
box-sizing: border-box;
background: #008A91;
padding: 5px; }
.slicknav_menu * {
box-sizing: border-box; }
.slicknav_menu .slicknav_menutxt {
color: #1FA0A3;
font-weight: bold;
text-shadow: 0 1px 3px #000; }
.slicknav_menu .slicknav_icon-bar {
background-color: #1FA0A3; }
.slicknav_btn {
margin: 5px 5px 6px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #222; }
.slicknav_nav {
color: #1AD7E5;
margin: 0;
padding: 0;
font-size: 0.875em;
list-style: none;
overflow: hidden; }
.slicknav_nav ul {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 0 0 20px; }
.slicknav_nav .slicknav_row {
padding: 5px 10px;
margin: 2px 5px; }
.slicknav_nav .slicknav_row:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #fff; }
.slicknav_nav a {
\t transition: all .3s;
padding: 5px 10px;
margin: 2px 5px;
text-decoration: none;
\t font-size:20px;
color: #222; }
.slicknav_nav a:hover {
\t \t color: transparent;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #222; }
.slicknav_nav a:after{
\t content: attr(data-txthover);
position: absolute;
top: 0;
left: 0;
max-width: 0;
color: white;
white-space: nowrap;
overflow: hidden;
transition: max-width .3s ease-out;
}
.slicknav_nav .slicknav_txtnode {
margin-left: 15px; }
.slicknav_nav .slicknav_item a {
padding: 0;
margin: 0; }
.slicknav_nav .slicknav_parent-link a {
padding: 0;
margin: 0; }
.slicknav_brand {
color: #fff;
font-size: 18px;
line-height: 30px;
padding: 7px 12px;
height: 44px; }
}<body>
<div class="all">
<header>
<script
\t \t \t src="https://code.jquery.com/jquery-1.11.3.min.js"
\t \t \t integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
\t \t \t crossorigin="anonymous"></script>
<script src="SlickNav-master/dist/jquery.slicknav.js"></script>
<script>$(function(){
\t \t $('#menu').slicknav();
\t });
</script>
<nav>
<div id="fix">
<ul class="main-nav" id="menu">
<li><a href="portfolio.html" class="logo"><img id="logo" src="logo.svg" alt="logo"></a></li>
<li><a href="#logowheader">Home</a></li>
<li><a href="#recent">Skills</a></li>
<div class="dropdown">
<button class="dropbtn">
<li><a href="#description">About</a></li></button>
<div class="dropdown-content">
<a href="#">Work</a>
<a href="education2.html">Education</a>
</div>
</div>
<li><a href="#iwant">Contact</a></li>
</ul></div>
</nav></header>
</div>
</body>
谢谢你这么多的寻找到这个！我对编码仍然陌生，这真的有助于一吨！谢谢！ – Cakers
@Cakers从流中取出绝对元素，所以它们不会真正占用任何空间（它们就像固定的元素，只是没有固定到窗口，而是到最近的'display：relative' parent） –
oooh I得到它！这样做更有意义。谢谢！ @一个。刘 – Cakers