Use second time navigation.js in underscores

I try to add a button dropdown in my theme underscores (without menu, simple div).

I would like to use the script of navigation.js already present to notduplicate :

( function() {
var container, button, menu, links, i, len;

container = document.getElementById( ‘site-navigation’ );
if ( ! container ) {
return;
}

container2 = document.getElementById( ‘share-menu’ );
if ( ! container ) {
return;
}

button = container.getElementsByTagName( ‘button’ )[0];
if ( ‘undefined’ === typeof button ) {
return;
}

menu = container.getElementsByTagName( ‘ul’ )[0];

// Hide menu toggle button if menu is empty and 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’ );
}
};

// Get all the link elements within the menu.
links = menu.getElementsByTagName( ‘a’ );

// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( ‘focus’, toggleFocus, true );
links[i].addEventListener( ‘blur’, toggleFocus, true );
}

/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;

// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( ‘nav-menu’ ) ) {

// On li elements toggle the 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 to 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();
for ( i = 0; i < 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’ );
}
};

for ( i = 0; i < parentLink.length; ++i ) {
parentLink[i].addEventListener( ‘touchstart’, touchStartFn, false );
}
}
}( container ) );
} )();

But I do not reach there.

I tried to duplicate the html, but that did not work.

I thus copied out the html and the Javascript by changing names:

Html :

<div id=”example1″>
<button class=”menu-toggle” aria-controls=”example2″ aria-expanded=”false”>
<i class=”myicon”></i>
</button>
<div id=”example2″ aria-expanded=”false”>my content</div>
</div>

Javascript :

( function() {
var container2, button2, menu2;

container2 = document.getElementById( ‘example1’ );

button2 = container.getElementsByTagName( ‘button’ )[0];

menu2 = container.getElementById( ‘example2’ )[0];

menu2.setAttribute( ‘aria-expanded’, ‘false’ );

button2.onclick = function() {
container2.className += ‘ toggled’;
button2.setAttribute( ‘aria-expanded’, ‘true’ );
menu2.setAttribute( ‘aria-expanded’, ‘true’ );
};

} )();

But there either it does not work (no event on button for example).

Would you have a simple solution to this problem which I turned in all directions? 😉

Read more here:: Use second time navigation.js in underscores

Leave a Reply

Your email address will not be published. Required fields are marked *