As promised, although it's a little later than I said it would be, here's my take on how I should have coded the menus for the Asian Football Awards website, for mobile particularly, I posted about last week.
I've created a JSFiddle demo so you can grab the HTML, JS, CSS and see it in action:
I've added comments in the above example but here's a break down of what's going on:
- The click function is bound to all elements with the class '.nav'
- The '.nav' item that's been clicked is stored in "clickedIcon"
- I then need the 'REL' and 'ID' of the clicked menu element
- I use the ID to get the relative menu for the clicked menu
- I also use the current 'ID' & 'REL' to get the "other" menu, that wasn't clicked, I'm able to get the 'other' 'REL' and 'ID'
- With these I get the other relative menu for the non-clicked menu item
- I check to see IF the other menu is open. If it is I go ahead and close it and remove the 'hover' class from the other clicked menu item
- At the same time I'm checking to see if the menu I've clicked has the 'hover' class. If it does I know the menu is already open and I need to close it. If it doesn't have the class then I know I need to open it and add the class - that's the IF ELSE statement.