下拉菜单会中断。我假设它与我的标题部分的高度有关，但我不知道如何使标题部分更大我只想在标题上看到我的下拉部分。我尝试做一个z-index而且它没有用。我可能会把它放在错误的地方，但我不确定。如果有人对如何解决这个问题有任何建议，请告诉我！
;(function ($, document, window) {
var
// default settings object.
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,
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;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
// Don't remove IDs by default if duplicate is false
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;
// clone menu if needed
if (settings.duplicate) {
$this.mobileNav = menu.clone();
} else {
$this.mobileNav = menu;
}
// remove IDs if set
if (settings.removeIds) {
$this.mobileNav.removeAttr('id');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('id');
});
}
// remove classes if set
if (settings.removeClasses) {
$this.mobileNav.removeAttr('class');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('class');
});
}
// remove styles if set
if (settings.removeStyles) {
$this.mobileNav.removeAttr('style');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('style');
});
}
// styling class for the button
iconClass = prefix + '_icon';
if (settings.label === '') {
iconClass += ' ' + prefix + '_no-text';
}
if (settings.parentTag == 'a') {
settings.parentTag = 'a href="#"';
}
// create menu bar
$this.mobileNav.attr('class', prefix + '_nav');
menuBar = $('<div class="' + prefix + '_menu"></div>');
if (settings.brand !== '') {
var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
$(menuBar).append(brand);
}
$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);
// iterate over structure adding additional structure
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 a list item has a nested menu
if (data.children.length > 0) {
// select all text before the child menu
// check for anchors
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"/>'
);
// wrap item text with tag and add classes unless we are separating parent links
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');
// create parent arrow. wrap with link if parent links and separating
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
arrowElement = arrowElement.wrap(wrapElement).parent();
//append arrow
$(nodes).last().after(arrowElement);
} else if ( item.children().length === 0) {
item.addClass(prefix+'_txtnode');
}
// accessibility for links
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();
}
});
//also close on click if parent links are set
if (settings.closeOnClick && settings.allowParentLinks) {
item.children('a').children('a').click(function (event) {
//Emulate menu close
$($this.btn).click();
});
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
//Emulate menu close
$($this.btn).click();
});
}
});
// structure is in place, now hide appropriate items
$(items).each(function () {
var data = $(this).data('menu');
if (!settings.showChildren){
$this._visibilityToggle(data.children, null, false, null, true);
}
});
// finally toggle entire menu
$this._visibilityToggle($this.mobileNav, null, false, 'init', true);
// accessibility for menu button
$this.mobileNav.attr('role','menu');
// outline prevention when using mouse
$(document).mousedown(function(){
$this._outlines(false);
});
$(document).keyup(function(){
$this._outlines(true);
});
// menu button click
$($this.btn).click(function (e) {
e.preventDefault();
$this._menuToggle();
});
// click on menu parent
$this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
e.preventDefault();
$this._itemClick($(this));
});
// check for keyboard events on menu button and menu parents
$($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{
overflow: hidden;
}
.dropdown .dropbtn {
background-color: inherit;
}
.dropdown-content{
display: none;
position: absolute;
z-index:2000;
}
.dropdown-content a{
float:none;
display: block;
}
.dropdown:hover .dropdown-content{
display:block;
}
.dropbtn{
border:none;
font-family: 'Philosopher', sans-serif;
z-index: 3000;
}
header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index:1000;
}
#logowheader{
background: url(footer_lodyas.png) no-repeat fixed;
background-size: cover;
background-position: center center;
}
@media (max-width: 400px) {
.slicknav_menu{
display:block;
z-index: 1000;
}
header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#menu{
display:none;
z-index: 1000;
}
.slicknav_menu img{
display:none;
z-index: 1000;
}
}
.main-nav {
display: flex;
padding-left: 0;
font-family: 'Philosopher', sans-serif;
padding-left:20px;
padding-right:40px;
z-index: 1000;
}
.main-nav a:hover{
color: white;
}
.main-nav a:after{
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 {
color: #1FA0A3;
padding: 10px;
text-decoration: none;
font-size: 20px;
transition: all .3s;
z-index: 1000;
/*display: block*/
}
#logo {
width: 50px;
text-decoration: none;
}
.main-nav li{
list-style: none;
text-decoration: none;
}
#logowheader{
width:300px;
padding-left: 0;
}
#vp{
color: white;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
padding-bottom:20px;
line-height: 25px;
margin-right:20px;
}
html, body {
width:100%;
height:100%;
}
.center{
margin-top: 150px;;
margin-left: auto;
margin-right: auto;
display: block;
}<header>
<script
src="https://code.jquery.com/jquery-1.11.3.min.js"
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
crossorigin="anonymous"></script>
<script src="SlickNav-master/dist/jquery.slicknav.js"></script>
<script>
$(function(){
$('#menu').slicknav();
});
</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="#">Education</a>
</div>
</div>
<li><a href="#iwant">Contact</a></li>
</ul></div>
</nav></header>