I have a header with five navigation buttons on it. When the screen width is shrunk down the buttons will not fit the way they are. Is there some soft of other object like a dropdown menu that will allow me to take those 5 buttons and replace them with a small symbol and when you press that it will drop down and you can pick one of those five from the dropdown instead of the buttons?
Not sure about the drop down part off the top of my head, but you would need to use a breakpoint container to do the container swapping between small and larger width versions of the nav
You could always place an icon, then configure an onClick event to open a Popup which uses relative positioning.
Then you just need to put your nav options into the View that you select to be the Popup.
Extending this, I assume there’s currently no way to resize the popup dynamically with the height of the nav menu? Say for instance you have an accordion or menu component that expands, can we make the height of the popup expand as well? Or is this something some fancy CSS could do? (if so, any hints?)
There’s no way to change the size of the Popup after you’ve opened it. I know Nader tried something like this once but the best we could point him toward was to open a new Popup at the same location with the new dimensions and close the old one. This approach will NOT work for relative position popups.
If you were using a Flex container in column mode you could possibly have an accordion between components which has display set to false until you need it, and a basis of “auto”. Then have the icon’s click event negate that display propertyNot the best approach though. Actually, it didn’t turn out too bad…
HIddenNavigation.mov.zip (963.0 KB)
onClick Event of Icon:
self.getSibling('Accordion').position.display = not self.getSibling('Accordion').position.display
Or you could do the exact same thing with a Dropdown. I would recommend a change script on the Dropdown’s value however:
# this would hide the dropdown whenever you make a selection
if currentValue.value != previousValue.value:
self.position.display = False