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?
Thanks for the reply. I had it setup for Hover’s initially, but that doesn’t work for mobile ‘touch’ unfortunately - so trying to figure out a solution for all devices.
I’ve managed to fix the double dropdown menu’s by starting with the Dropdown Component - then applying a new interaction to each to handle the slide down and opacity. The Dropdown Component inherently handles clicking between the menus and hiding the alternate menu, while also closing if you click away.
I think what happened, is when I originally tried the Dropdown Component, it didn’t have the new ‘Dropdown triggers’ which are essential for creating the nice slide down menu transitions. So problem solved.
I am still interested to see how other people handle HiDPI jaggyness on images in the desktop browser? Is there some sort of option to add better aliasing? or do I just have to set it up to choose between high res images for mobile, and a normal res image for desktop?
So now, using DropDown Components - I have the issue with not being able to set the z-order of the dropdown list - no matter what I do, I can’t get the dropdown list to go behind the main header - basically I need it stacked like this:
z-order 1 (lower) dropdown menus
z-order 2 (middle) white header bar
z-order 3 (higher) dropdown toggle buttons
Anyone had the same issue?
P.S. I’ve hacked it for now - and have the Toggle Button basically hiding the Dropdown list… but still seems a bit weird that you can’t set the z-order of the dropdown toggle button and menu list independently?
Yes, the lack of controls over the interactions on mobile is frustrating. Hope they fix that in the next verson.
But,
On HOVER OVER on MAIN NAV IMAGE you open MAIN NAV. (move to origin)
When you HOVER OVER main nav it stays at its place.
On HOVER OUT it closes.
You can also make a ON PRESS on the MAIN NAV IMAGE for mobile.
Any insight into the z-order issue with the dropdown toggle vs dropdown list? I’m trying to sandwich the header bar between the two.
Also, any insight into handling HiDPI images for desktop vs mobile? On desktop the image edges are jagged - so I’m thinking I need a proper sized image for desktop, than the Hi Res image for tablet/mobile breakpoints?
