Streaming live at 10am (PST)

OnHover Navigation Supermenu


#1

I'm trying to create one of those large mouseover navigation menus that you often see (here's an example on http://www.vodafone.co.uk/)

I can mouse over an item in the navigation and then move the mouse down into the opened nav to select an item. If I mouse off the opened navigation I return to the default closed state and the rollover state of the nav button returns to normal

I've tried a bunch of approaches on mine (https://preview.webflow.com/preview/vce?preview=81c3b9c9832daff0647280f7e7d8d276) - I've only implemented it on the Services nav item.

I can't seem to maintain the hover state of the navigation item AND enable the user to cursor down over the opened menu. It's like it's one or the other.


#2

Hi, to me, your menu behaves pretty well:

So there is something I don't understand when you say:


#3

Hi Vincent, thanks for the reply.

I did make a breakthrough shortly before your reply. It turned out I needed to essentially rebuild the nav bar without using the standard Webflow component.

It's very hacky though because in order to make sure that the rollover states appear as I need them to I'm having to put lots of interactions in there. For example on the DIV that houses the EU VAT link, I have to have an interaction that hides the black services navigation DIV, as well as the little black triangle that points upwards. If you look through the interactions in my read only site you'll see that.

If you know of any way to do this in a more conventional way, I'm all ears. The frustrating thing is that I'm going to have to build the mobile nav from scratch too, which is a shame since the standard component does it so well.


#4

Well I published a way for hover menus on my sandbox a long while ago. It's a bit hacky but it's not messy.

http://sab.webflow.io/menu-in-dropdown-menu

You can duplicate the site and see for yourself how it's made.

http://sab.webflow.io/menu-in-dropdown-menu

But in a few words, you need to enlarge the drop-down menu so it underlays the menu item, and then add a top padding of the same value. That way, the menu can stay open and you can preperly register the hover-out when passing on another item.

Now that can be a problem with mega menu, but there must be a way...

Be aware that when using the Nav component of Webflow, it comes with a proper Nav HTML5 tag. If you're redoing your nav entirely, you should carrefuly add the Nav HTML5 tag manually. It's important for SEO but it's also important if the menu is fixed and you're linking to #sections within the page.


#5

Thanks again Vincent. I guess since I cracked it anyway (and hopefully it's going to work on all browsers) I'll got with my own workaround method.

But the HTML5 nav thing is news to me. Do you have any advice or can point me somewhere I can get the information on adding that tag?


#6

In Webflow, select an element, go to the settings tab and chose a tag.

So here I show you how my custom upper div is actually a navigation bar and how I manually said that to HTML. In the code, you see that the element itself is now names <nav> instead of <div>

Tags are HTML5 basis. Instead of everything being a div, you can specify what is a nav, a section, a header, the footer, the sidebar etc. It makes the code "semantic", have a more natural reading. It's good for SEO, accessibility (and OCD tendencies :wink: )

Rough overview:

I let you do you own research because with HTML5 tags it's difficult to find strict ules, there room for interpretation. Just remember one important thing: any sub content that can be listed in a list, like anything you'd see listed in a RSS feed, must be an <article>. By respecting this rule you'll increase the SEO of your content and drastically help people who rely on accessible devices to read content.

You can start here: http://www.w3schools.com/html/html5_semantic_elements.asp

And continue there: https://www.google.fr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=how+to+use+HTML5+tags

PS: Webflow doesn't propose all the tags so you can start to familiarize with those. I wrote an extensive post once, about Webflows' tags but... can't find it, stupidly :confused:


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.