Want to add a cool flyout menu action that triggers on click instead of mouseover? The current code triggers the flyouts on mouseover, but I need them to open only when clicked. Specifically, I'd like to change the functionality so that you click on a small icon (plus/minus) next to the menu item with child menus. Can anyone provide guidance on what needs to be modified in this code?
/* Additions for handling flyout menus on click */
var sUserAgent = navigator.userAgent.toLowerCase();
var isIE=document.all?true:false;
var isNS4=document.layers?true:false;
var isOp=(sUserAgent.indexOf('opera')!=-1)?true:false;
var isMac=(sUserAgent.indexOf('mac')!=-1)?true:false;
var isMoz=(sUserAgent.indexOf('mozilla/5')!=-1&&sUserAgent.indexOf('opera')==-1&&sUserAgent.indexOf('msie')==-1)?true:false;
var isNS6=(sUserAgent.indexOf('netscape6')!=-1&&sUserAgent.indexOf('opera')==-1&&sUserAgent.indexOf('msie')==-1)?true:false;
var dom=document.getElementById?true:false;
/* Other functions and variables related to menu operation */
function loadMenus(){
// Existing function logic to initialize menus
}
// Additional event handlers and modifications to support click-triggered flyouts
document.body.addEventListener("click", function(event){handleFlyoutClick(event);}, true);
function handleFlyoutClick(event){
if(menuIconClicked(event.target)){
var menuItemId = getMenuItemId(event.target);
showMenu("navMenu_" + menuItemId);
}
}
function menuIconClicked(target){
return target.classList.contains('menuIcon');
}
function getMenuItemId(target){
var itemId = target.closest('.navItem').id;
return itemId.replace('navItem_', '');
}