I have two menus. Is it possible to open one of them by clicking a link within another?
There is a relationship between two separate menus that allows one to close if another is opened which leads me to think it is possible, at least with a little manipulation of the js. Has anyone had tried this, or know of a way to open the navigation without clicking the hamburger icon?
I believe youâre over complicating it, just look into setting up an interaction trigger that reveals your second menu element. Without seeing the specific project I canât really give you any more guidance, but feel free to include your read-only link if you get stuck getting it to work.
Hi mikeyevin,
Thanks for the suggestion.
I tried using interactions but turns out Webflow doesnât allow interactions (or at least interactions v2) to be placed on an element outside of the navbar Iâm wanting to affect.
This project shows what Iâm trying to achieve. The navigation using the title âMENUâ has a list element inside called âOpen Second navâ. When this is clicked Iâd like to open the MY PRODUCTSâ navigation. This is only for landscape-mobile and mobile viewports - tablet and above use have different behaviour.
After looking at your project Iâm still a bit unclear, but it looks like you want two menu icons on mobile with a link in one nav menu (nav 1) opening up the other nav menu (nav 2)?
You can absolutely trigger an element outside of the element you want to affect, however youâre referencing the wrong trigger. The one youâre looking at âtriggersâ when a nav opens, but since you want to trigger the nav with a click, you need to choose the âMouse click (tap)â option.
Yes, that is exactly what Iâm looking to do.
I canât find a way to open the second nav using a Tap Click either? The options Iâm presented with are in relation to the element currently selected.
I could always try using legacy interactions with the âselect different elementâ command, but this doesnât provide custom navigation functionality such as closing a navigation when clicking off the nav.
If you donât have too much experience with IX2 Iâd recommend going through the course on Webflow University - however the lessons on triggers and animation and show and hide elements on click may give you enough to get going. Itâs extremely powerful and much more intuitive than legacy interactions once you get the hang of it, so Iâd urge you to go that route over relying on the old version.
The short answer is that youâre going to want to use âStart an animationâ then choose which elements you want to affect (this can be any selected element, or even based on class) and what happens over the course of your animation duration.
Does using IX2 provide complex commands such as opening secondary navigation while retaining the functionality provided by the nav? Or, am I back to square one, having to build it entirely from interactions? The later is exactly what Iâm trying to avoid.
Ideally, I was hoping that there would be a javascript trigger that I would be able to call with an onClick function.
What functionality are you wanting to retain?
When you say âbuilding from square oneâ it sounds like your expecting a long process, but once you know how the system works it shouldnât take long and will give you full control over what youâre wanting to accomplish. Itâs possible that using Javascript could yield a similar experience (especially if youâre comfortable with it), however I personally would suggestion utilizing what is provided with native Webflow tools.
Itâs important to remember that the Navbar element can be recreated âmanuallyâ and will not only provide the same experience, but can be modified to act however youâd like it to act.
Thanks Mike, I appreciate you help and knowledge with this.
The special functionality which I mentioned relates to that already built into the navigation. For example, one of my navs doesnât cover the entire page but clicking on the page background closes the nav. As far as Iâm aware this cannot be done with interactions alone.
Also, when previously using interactions for navigations Iâve found issues with the first click, second click commands. For example, if nav 1 is already open, I can set an interaction on nav 2 that closes nav 1, but this leaves nav 1 listening for the second click (as the first has already originally opened the nav) which would result in nothing happening when clicked again. This makes for a poor user experience.
With this in mind, trying to approach it with js may be best!
No problem, glad I could provide some help!
This is totally possible, just make sure your navigation wrapper is nested within a larger container that is fully transparent and spans the full height and width of your viewport. Make sure the z position of this element is behind your navigation wrapper and set a trigger that applies when a user clicks on this element that closes the navigation.
In this case you should be able to set the trigger to apply to both navigation elements instead of just one. Iâm admittedly not as familiar with the legacy interactions, however IX2 allows you to easily trigger any number of different elements upon clicking your target element - so as long as your structure is setup appropriately it should be possible to ensure a good user experience.
Hopefully my suggestions give you an alternative path if the Javascript route proves troublesome and feel free to reach out to the community if any other questions come up!
