javascript - How to apply an accordion to submenu -
i developing wordpress site using underscores theme , @ moment, navbar works on big screens picture shows:
but find problem in small screens when click on menu item has submenu. not have accordion.
how can apply accordion submenu when click on example, sub-menu drop down accordion in way can still see rest of menu?
here current css:
@media(max-width: 600px){ ul#primary-menu li { width: 100%; } } .menu-main-menu-container { max-width: 1280px; margin: auto; } li#menu-item-65 > a:after { font-family: fontawesome; content: '\f107'; padding-left: 10px; color: #99c71b; } li#menu-item-66 > a:after { font-family: fontawesome; content: '\f107'; padding-left: 10px; color: #99c71b; } .main-navigation { clear: both; display: block; float: left; width: 100%; background-color: #353535; border-bottom: 5px solid #99c71b; } .main-navigation ul { display: none; list-style: none; margin: 0; } ul#primary-menu > li { border-top: 3px solid; padding-bottom: 3px; } ul#primary-menu > li:hover{ border-top: 3px solid #99c71b; } .main-navigation li { float: left; position: relative; } .main-navigation { display: block; text-decoration: none; color: white; font-weight: 600; text-transform: uppercase; padding: 15px; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 3.5em; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } /* submemunu*/ ul.sub-menu { background-color: #cecece; } ul.sub-menu { padding: 0 !important; } ul.sub-menu a:hover { border-top: 0px solid transparent; } ul.sub-menu li:first-child { /* padding-top: 10px;*/ } ul.sub-menu li { margin-left: -33px !important; } ul.sub-menu a:hover { color: #fff; } /* small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen , (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } and javascript:
( function( $ ) { var container, button, menu, links, submenus, i, len; container = document.getelementbyid( 'site-navigation' ); if ( ! container ) { return; } button = container.getelementsbytagname( 'button' )[0]; if ( 'undefined' === typeof button ) { return; } menu = container.getelementsbytagname( 'ul' )[0]; // hide menu toggle button if menu empty , return early. if ( 'undefined' === typeof menu ) { button.style.display = 'none'; return; } menu.setattribute( 'aria-expanded', 'false' ); if ( -1 === menu.classname.indexof( 'nav-menu' ) ) { menu.classname += ' nav-menu'; } button.onclick = function() { if ( -1 !== container.classname.indexof( 'toggled' ) ) { container.classname = container.classname.replace( ' toggled', '' ); button.setattribute( 'aria-expanded', 'false' ); menu.setattribute( 'aria-expanded', 'false' ); } else { container.classname += ' toggled'; button.setattribute( 'aria-expanded', 'true' ); menu.setattribute( 'aria-expanded', 'true' ); } }; // link elements within menu. links = menu.getelementsbytagname( 'a' ); submenus = menu.getelementsbytagname( 'ul' ); // set menu items submenus aria-haspopup="true". ( = 0, len = submenus.length; < len; i++ ) { submenus[i].parentnode.setattribute( 'aria-haspopup', 'true' ); } // each time menu link focused or blurred, toggle focus. ( = 0, len = links.length; < len; i++ ) { links[i].addeventlistener( 'focus', togglefocus, true ); links[i].addeventlistener( 'blur', togglefocus, true ); } /** * sets or removes .focus class on element. */ function togglefocus() { var self = this; // move through ancestors of current link until hit .nav-menu. while ( -1 === self.classname.indexof( 'nav-menu' ) ) { // on li elements toggle class .focus. if ( 'li' === self.tagname.tolowercase() ) { if ( -1 !== self.classname.indexof( 'focus' ) ) { self.classname = self.classname.replace( ' focus', '' ); } else { self.classname += ' focus'; } } self = self.parentelement; } } /** * toggles `focus` class allow submenu access on tablets. */ ( function( container ) { var touchstartfn, i, parentlink = container.queryselectorall( '.menu-item-has-children > a, .page_item_has_children > a' ); if ( 'ontouchstart' in window ) { touchstartfn = function( e ) { var menuitem = this.parentnode, i; if ( ! menuitem.classlist.contains( 'focus' ) ) { e.preventdefault(); ( = 0; < menuitem.parentnode.children.length; ++i ) { if ( menuitem === menuitem.parentnode.children[i] ) { continue; } menuitem.parentnode.children[i].classlist.remove( 'focus' ); } menuitem.classlist.add( 'focus' ); } else { menuitem.classlist.remove( 'focus' ); } }; ( = 0; < parentlink.length; ++i ) { parentlink[i].addeventlistener( 'touchstart', touchstartfn, false ); } } }( container ) ); } )( jquery ); hoping help. in advance
i've used in underscores instances mobile menu on, may helpful in situation.
(function($) { $('#site-navigation ul li ul').hide(); //hide children default $('#site-navigation ul').children().click(function(){ $(this).children('#site-navigation ul li ul').slidetoggle('400'); }).children('#site-navigation ul li ul').click(function (event) { event.stoppropagation(); }); })( jquery ); it works if main menu item not link (otherwise clicks through main menu item). didn't insert underscores existing navigation.js file. gave own file in js folder , appropriate wp_enqueue_script in theme's functions.
Comments
Post a Comment