I'm prototyping a new website, and trying to get a double dropdown menu working properly.
Essentially, when you click the 'bulletproof' logo, it opens the 'main menu' - and if you click the 'account' icon, it opens the 'sub menu'. Now to prevent them overlapping each other, I've been trying to make each nav button hide the other menu on click - but this seems to create hiccups with the state of each menu when you switch between each one, resulting in the need to double click the buttons again. Basically the multiple 'click' and 'second click' triggers are bugging it out.
Ultimately, what I would like to do is make it so you click on a button to drop down that respective menu - but - if you click 'anywhere' away from that button or menu - it will close it. Which would solve the menu vs sub menu overlapping, and allow you to click the 'body' or anywhere away from a menu to close them all.
I tried using the dropdown triggers, but couldn't get them to work (I actually set this up a while ago, so I can't remember if I'm actually using the dropdown component or not) - would that be the solution? To replace each menu with a dropdown component and use those additional triggers? Or is there a way to get it going with the way I have it structured - just using the Click Triggers in a different way? There doesn't seem to be a way to trigger hiding the menus if you click 'anywhere' away from the button or menu? Like a 'Not Focused' trigger?
Anyway, would appreciate any tips or guidance on how to best achieve multiple dropdown menus that hide themselves appropriately when the other menu is opened, or both menu's are clicked away from (body click).
Plus; I setup the logo and account icon to be 3x resolution for HiDPI - which looks great on my phone - but it has really bad aliasing (jaggy edges) in the browser on my desktop - what's the best way to resolve that?
Sorry for the novel - Cheers,