javascript - Dropdown overlapping other nav items -
my drop-down overlapping on navigation in mobile view , wondering if knew how fix this. appreciated! also, in desktop view know how expand header when hover on drop-down not fall off header?
(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, 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>'); 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); 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 = 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 it's not 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 , 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 , children based on visibility plugin.prototype._setvisattr = function(el, hidden) { var $this = this; // select parents aren't hidden var nonhidden = el.children('li').children('ul').not('.'+prefix+'_hidden'); // iterate on 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); }); } }; // 1st level items 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; // first parameter object (options), or omitted, instantiate new instance if (options === undefined || typeof options === 'object') { return this.each(function () { // allow plugin instantiated once due methods if (!$.data(this, 'plugin_' + mobilemenu)) { // if has no instance, create new one, pass options our plugin constructor, // , store plugin instance in elements jquery data object. $.data(this, 'plugin_' + mobilemenu, new plugin( this, options )); } }); // if string , doesn't start underscore or 'init' function, treat call public method. } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { // cache method call make possible return value var returns; this.each(function () { var instance = $.data(this, 'plugin_' + mobilemenu); // tests there's plugin-instance , checks requested public method exists if (instance instanceof plugin && typeof instance[options] === 'function') { // call method of our plugin instance, , pass supplied arguments. returns = instance[options].apply( instance, array.prototype.slice.call( args, 1 ) ); } }); // if earlier cached method gives value return value, otherwise return preserve chainability. return returns !== undefined ? returns : this; } }; }(jquery, document, window));.dropdown{ overflow: hidden; } .dropdown .dropbtn { background-color: inherit; } .dropdown-content{ display: none; position: absolute; } .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; background-color: #333; position: fixed; top: 0; width: 100%; } @media (max-width: 400px) { .slicknav_menu{ display:block; } header{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } #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; } .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 { color: #1fa0a3; padding: 10px; text-decoration: none; font-size: 20px; transition: .3s; } @media screen , (min-width: 760px) { .slicknav_menu{ display:none; } } @media (max-width: 760px){ .slicknav_menu{ display:block; } #menu{ display:none; } .slicknav_menu img{ display:none; z-index: 1000; } .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 { 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 { display: inline; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav { display: block; } .slicknav_nav .slicknav_parent-link { display: inline; } .slicknav_brand { float: left; } .slicknav_menu { top:0; width: 100%; 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 { transition: .3s; padding: 5px 10px; margin: 2px 5px; text-decoration: none; font-size:20px; color: #222; } .slicknav_nav a:hover { color: transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav a:after{ 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 { padding: 0; margin: 0; } .slicknav_nav .slicknav_parent-link { 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 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="education2.html">education</a> </div> </div> <li><a href="#iwant">contact</a></li> </ul></div> </nav></header> </div> </body>
if don't want subheader overlap else, don't use absolute.
change this:
.dropdown-content{ display: none; position: relative; } (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, 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>'); 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); 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 = 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 it's not 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 , 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 , children based on visibility plugin.prototype._setvisattr = function(el, hidden) { var $this = this; // select parents aren't hidden var nonhidden = el.children('li').children('ul').not('.'+prefix+'_hidden'); // iterate on 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); }); } }; // 1st level items 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; // first parameter object (options), or omitted, instantiate new instance if (options === undefined || typeof options === 'object') { return this.each(function () { // allow plugin instantiated once due methods if (!$.data(this, 'plugin_' + mobilemenu)) { // if has no instance, create new one, pass options our plugin constructor, // , store plugin instance in elements jquery data object. $.data(this, 'plugin_' + mobilemenu, new plugin( this, options )); } }); // if string , doesn't start underscore or 'init' function, treat call public method. } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { // cache method call make possible return value var returns; this.each(function () { var instance = $.data(this, 'plugin_' + mobilemenu); // tests there's plugin-instance , checks requested public method exists if (instance instanceof plugin && typeof instance[options] === 'function') { // call method of our plugin instance, , pass supplied arguments. returns = instance[options].apply( instance, array.prototype.slice.call( args, 1 ) ); } }); // if earlier cached method gives value return value, otherwise return preserve chainability. return returns !== undefined ? returns : this; } }; }(jquery, document, window));.dropdown{ overflow: hidden; } .dropdown .dropbtn { background-color: inherit; } .dropdown-content{ display: none; position: relative; } .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; background-color: #333; position: fixed; top: 0; width: 100%; } @media (max-width: 400px) { .slicknav_menu{ display:block; } header{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } #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; } .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 { color: #1fa0a3; padding: 10px; text-decoration: none; font-size: 20px; transition: .3s; } @media screen , (min-width: 760px) { .slicknav_menu{ display:none; } } @media (max-width: 760px){ .slicknav_menu{ display:block; } #menu{ display:none; } .slicknav_menu img{ display:none; z-index: 1000; } .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 { 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 { display: inline; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav { display: block; } .slicknav_nav .slicknav_parent-link { display: inline; } .slicknav_brand { float: left; } .slicknav_menu { top:0; width: 100%; 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 { transition: .3s; padding: 5px 10px; margin: 2px 5px; text-decoration: none; font-size:20px; color: #222; } .slicknav_nav a:hover { color: transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav a:after{ 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 { padding: 0; margin: 0; } .slicknav_nav .slicknav_parent-link { 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 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="education2.html">education</a> </div> </div> <li><a href="#iwant">contact</a></li> </ul></div> </nav></header> </div> </body>
Comments
Post a Comment