Can I set the dropdown toggle to open a webpage and hover to open the dropdown list?

Design help Layout & Design
1

Hi,

I am relatively new to webflow. I would like to ask if I can set the dropdown toggle in the navbar to open a page and hover over the toggle to open the dropdown list? I asked this because I can do it in editor X but can’t figure out a way to do it in webflow. See my below website link and in the navbar, “The Ideas Factory” points to a webpage but opens the dropdown list on hover. Anyone who knows how to do this please kindly advise.

Thanks,
Dave

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

2

Hello @DaveWong
Can you share you project readonly link.

image
image1578×76 16.1 KB

or

3

Hello @Haji_Khan_Keerio ,

Please see my shared link below. I have modified my design a little and now my navbar looks different to the website that I had shared in the first post. But I am still interested to know if it is possible to click on a dropdown toggle to go to a webpage instead of just opening the dropdown list. Thanks.

https://preview.webflow.com/preview/institute-of-insights?utm_medium=preview_link&utm_source=dashboard&utm_content=institute-of-insights&preview=e37cc967ae88359aef7a262c880db542&workflow=preview

4

Hello @Haji_Khan_Keerio ,

To add on for clarity, I wish to find out if it is possible in webflow to design the navbar in the following way. Hover over a dropdown toggle to open the dropdown list instead of clicking on the dropdown toggle to open the dropdown list. Clicking on the dropdown toggle would instead open a webpage.

Please see https://www.instituteofinsight.com/

In the above website designed in editorX, upon hovering over the “The Ideas Factory” in the navbar, the dropdown appears. Clicking on the “The Ideas Factory” opens a webpage.

Thanks.

5

Regarding the open-on-hover, yes;

image

Regarding the navigate on clicking the dropdown parent… that’s not built into Webflow, however you could do it easily with an id and a bit of jQuery.

The problem is, how would that work on a mobile device, where there is only clicking and no hover? There, you would effectively be making the dropdown menu inaccessible, because a tap would both open it and navigate at the same time.

You would essentially need to build two separate navs, one for mobile, and another for desktops. Even then, desktop users who favor touch screen displays would run into problems with your nav.

In general, best practice is to assume that mouseover (hover) does not exist. It’s fine for styling, e.g. highlight a button before you click it, or animate a news item on mouseover- but never depend on mouseover as part of your functionality or navigation.

6

Hi @memetican ,

Thank you for the reply. Actually on mobile navigation, there is both a clickable dropdown toggle and a clickable dropdown arrow. The first opens a webpage while the latter opens the dropdown list.

Nevertheless, you post is very helpful. By the way, is it difficult to implement this functionality on jQuery?

Thanks,
Dave

7

Hi Dave,

Yes very easy to do, here’s a Loom video showing it;

Demo site where you can see it in action;

Read-only link

https://preview.webflow.com/preview/clickable-dropdown-nav?utm_medium=preview_link&utm_source=dashboard&utm_content=clickable-dropdown-nav&preview=7032c9817633320f914b03612bb83040&workflow=preview

Code;

$(function() {
  
  $( "#DropdownMenu" ).click(function() {
    window.location.href = '/styleguide';
  });
  
});

And CodePen, in case you want to fork and experiment;

Hope that does the trick for you.

3 Likes
8

Woohoo, Thanks Michael! This is exactly what I was looking for :star_struck:

9

Hi Dave,

Thanks for this. I only don’t get it to work unfortunately.

I pasted the code in the head code and tried different ways: without script tags, with script tags and even with script tag that includes jQuery, knowing this isn’t necessary right?
I also tried several destination URLs and the full URL, but it just doesn’t work.

Here’s a read-only link.

I added a button to the navbar on the top right, but the code isn’t referencing it unfortunately. Hope you or someone can help out, cheers.

10

Hi Tookster, it needs to be in script tags, and in the before body ( thus after jquery has loaded ).

The ID used here DropdownMenu needs to match whatever ID you’ve give your own dropdown menu.

1 Like
11

Beautiful, it works like a charm!
I modified the ID correctly, but maybe what I did wrong was putting it in the Head Code? I didn’t know jQuery is loaded afterwards. Or maybe I messed up some other way, either way it works now so I salute you!

1 Like