Navbar Submenus?

Community resources Product feedback
21

You can manually create megamenus now using divs and triggering them with interactions. By doing this you will have far greater control than any built in implementation. I completely abandoned the built in menu and dropdown in favor of a fully customized triggered div with nested submenus. You can see it here: www.canalalarm.com

22

Hi DFink, that is very much what i am looking for. Can you give a little more detail in how you did this in webflow. Just the basics and i am sure i can pick it up quickly.

many thanks

Waynedge

1 Like
23

Sure, bear with me, it’s easy, but a long process to explain. First, create a section and make it fixed to the right or left of the page and make its height 100%. Then move it left or right depending on which side of the page its on exactly the width of it which will move it off the page and make its display: none.

Then create another div to act as the button and put whatever icon you want it to look like inside. You then apply a click interaction to that button for the other div that makes it display:block and move to origin with whatever easing effect you like best. Then create an X icon in the corner apply an interaction to do the opposite to hide it.

Now that you have a div, you can put anything you want in it. What I did was create a full width container inside the pop out menu that contained links to my pages. Then for the last link I added a text block for the submenu interaction. (remember for all these “buttons” do not use actual buttons as they will take you to the top of the page, you must use divs instead)

Ok now you must create the sub menu. Create another container or even duplicate the one you just created and get rid of that last link. Then make its position relative and move it down by its height (this is to line it up so it overlays int he same spot as the original menu since they will stack by default) Then do the exact same thing as the original div, display: none, move off screen. You should now just see the first menu. Now apply an interaction to the last link div in the menu that controls the second container, moving it on screen and making it display: block. You also have to apply the same interaction to the first container moving it off the menu in the same direction. Then create a back button and apply the opposite.

This is important: Make the menu div that those links sit in set to overflow: hidden. This will make sure that the menu’s disappear when they move into the nested menu.

You can do this as many times as you want for as many menu’s as you would like.

Hope that helps. If you have questions, just ask specifically and I will try to answer them. Try creating it first though as most of the directions will make sense when you are in the editor.

Good luck!

24

DFink many thanks, for the effort to explain in detail, I will try it shortly and no doubt pester you for some help when i get stuck :wink:

W.

25

I know this comment is old, but for the sake of completeness, this comment is worth responding to because this is one of the first links that comes up in search.

There is now a Dropdown widget! To add a dropdown menu to the navbar widget:

  1. Create the navbar widget.
  2. In the Navigator (F), you can see a list of Nav Links under the Nav Menu div generated by the navbar widget.
  3. From the Add Elements (A) list, find the Dropdown widget.
  4. Drag the Dropdown widget into the Nav Menu div where you’d like it to appear in the list of Nav Links.
  5. You can also add more Dropdown Links via the Navigator (F)
  6. When you have the Dropdown element selected, you have access to some Settings (D).

Notes: I have not been able to figure out how to open the Dropdowns on hover without custom code. This’d be a great built-in feature.

1 Like
26

Although hover submenus are not built-in yet, I found a workaround that works just fine.

  1. Create a dropdown
  2. Give a class to the dropdown menu
  3. Put a nav button in the same place as the dropdown toggle
  4. Select the dropdown toggle, go to settings and hide it in all devices
  5. Create an interaction for the nav button, choose hover (in), click effects other elements, write the class of the dropdown menu. Click “sibling only”. And then set the interaction to display the menu (you can just set the display to block or do some sort of an animation if you want to).
  6. Now select the dropdown menu and create an interaction for it. Select hover (out) and make the dropdown menu disappear (again, you can do this however you want).

And you have a dropdown that opens when you hover in, and closes when you hover out! Since you now use a nav button to toggle it, you can also give it a link property.

Note that this workaround does have a disadvantage: It is not mobile compatible.

1 Like