Kas
Reputation: 67
Other menu untoggle onclick
I am making hamburger buttons for small devices for my site. on one page I need two of them under eachother. I got this function for the button, I duplicated the function for the second button because otherwise it would not toggle both of them.
Now What I would like is for the buttons to go back to untoggled when you click the other one. I am not super at Javascript so I was wondering if someone could help me. This is the site page I'm working on: http://koekhuys.commteam.nl/bossche-koek/
( function() {
var container, button, menu, links, subMenus;
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 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' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// 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;
}
}
} )();
and this is the other function. I just duplicated it and added the id of the other menu.
( function() {
var container, button, menu, links, subMenus;
container = document.getElementById( 'product-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 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' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// 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;
}
}
} )();
I was thinking to do something with the "self" variable, but I do not have the knowlegde
This is the HTML for the menu's
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
other menu:
<nav id="product-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<?php wp_nav_menu( array( 'theme_location' => 'product', 'menu_id' => 'product-menu' ) ); ?>
</nav><!-- #site-navigation -->
Thank you so much for helping.
Upvotes: 0
Views: 525
Answers (1)
Matt Greenberg
Reputation: 2330
I haven't tested the code, but I believe this will work. I tried to DRY out the code as much as possible. Let me know if you have questions.
Vanilla JS
(function(){
// Boolean Checks to stop propagation
var STOPproductNav = false;
var STOPsiteNav = false;
// Grab Container Handles
var productNav = document.getElementById('product-navigation');
var siteNav = document.getElementById('site-navigation');
if ( !productNav ) { STOPproductNav = true };
if ( !siteNav ) { STOPsiteNav = true };
// Grab Button Handle
var btnproductNav = productNav.getElementsByTagName( 'button' )[0];
var btnsiteNav = siteNav.getElementsByTagName( 'button' )[0];
if ( typeof btnproductNav === 'undefined') { STOPproductNav = true };
if ( typeof btnsiteNav === 'undefined') { STOPsiteNav = true };
// Grab UL Handle
ulproductNav = productNav.getElementsByTagName( 'ul' )[0];
ulsiteNav = siteNav.getElementsByTagName( 'ul' )[0];
// Hide Menu Button if menu doesn't exist
if( typeof ulproductNav === 'undefined' ){
btnproductNav.style.display = 'none';
STOPproductNav = true;
};
if( typeof ulsiteNav === 'undefined' ){
btnsiteNav.style.display = 'none';
STOPsiteNav = true;
};
// Set default attributs if the menu exists
if( !STOPproductNav ) { initNavMenu( ulproductNav ); }
if( !STOPsiteNav ) { initNavMenu( ulsiteNav ); }
btnproductNav.onclick = function(){
// Hide Opposite menu if it exists
if ( !STOPsiteNav ){
siteNav.className = siteNav.className.replace( ' toggled', '' );
btnsiteNav.setAttribute( 'aria-expanded', 'false' );
ulsiteNav.setAttribute( 'aria-expanded', 'false' );
}
// Call Toggle Menu
toggleMenu(productNav,btnproductNav,ulsiteNav);
}
btnsiteNav.onclick = function(){
// Hide Opposite if it exists
if ( !STOPproductNav ){
productNav.className = siteNav.className.replace( ' toggled', '' );
btnproductNav.setAttribute( 'aria-expanded', 'false' );
ulproductNav.setAttribute( 'aria-expanded', 'false' );
}
// Call Toggle Menu
toggleMenu(siteNav,btnsiteNav,ulsiteNav);
}
if( !STOPproductNav ) { focusFix( ulproductNav ); }
if( !STOPsiteNav ) { focusFix( ulsiteNav ); }
// Toggle Menu
function toggleMenu(containerID, buttonID, menuID) {
if ( -1 !== containerID.className.indexOf( 'toggled' ) ) {
containerID.className = containerID.className.replace( ' toggled', '' );
buttonID.setAttribute( 'aria-expanded', 'false' );
menuID.setAttribute( 'aria-expanded', 'false' );
} else {
containerID.className += ' toggled';
buttonID.setAttribute( 'aria-expanded', 'true' );
menuID.setAttribute( 'aria-expanded', 'true' );
}
};
// Set default attr and add nav-menu to class
function initNavMenu(menuID){
menuID.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menuID.className.indexOf( 'nav-menu' ) ) {
menuID.className += ' nav-menu';
};
};
// focus fix
function focusFix(menuID){
// Get all the link elements within the menu.
links = menuID.getElementsByTagName( 'a' );
subMenus = menuID.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// 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 );
}
};
// Toggle Focus
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;
}
}
})();
Upvotes: 1
Related Questions
- Hide/show menu onclick javascript
- How to toggle between two menu items on click and close previous when next is toggled?
- How to change visibility of menu on click
- Collapse menu when open another BUTTON
- Open and close different divs through clicking menu
- How can I toggle menu onclick
- Toggle Menus using buttons in JS - But it shows both menus
- Menu Toggle on click
- Toggle menu items
- Javascript toggle menu