I need to create two interactions on my tab links, an hover and a clickable one

Design help Animations & Interactions
1

Hello everyone :wave:

I’m building a complex mega menu and I’m having trouble figuring out how to manage my interactions.

In the sub menu “Formats & Tarifs” I made a tab element on the left so that when you click on the tabs, you have another submenu on the right side. It works fine, the only problem is that I also need the tab links to be links themselves that redirect to pages (Notoriété - Vente - Marque Employeur - Réseaux Sociaux). And as you can’t have links inside tab links, I don’t know how to do…The ideal would be for the sub menu tabs to have hover that open submenu on the right side, and when you click on them you can open the page related.

Maybe there is another solution than the tabs element ?

Thank you for your help :pray:
Alicia

Here is my public share link: [Webflow - Refonte_Ma-video-corporate]

And the live site : https://ma-video-corporate-1.webflow.io/

2

I still couldn’t find the solution…if someone knows how to fix it, I’d be grateful if they share it :pray:

3

Hi @Alicia_MONTAGNE ,
I’m not sure how to fix it but this post may lead you in the right direction.

4

hi @Alicia_MONTAGNE when you will hover over multi tab element to open sub nav on right you will be facing identical issue you had with your other request when hover out closed mega nav. This means that mouse over will open right side but will close immediately on mouse out.

The more useful for clients will be to place link on right side together with other links. (maybe as first)

Another way can be creating some extra element (like arrow) on right side of text and click on it will open right side while click on text will go to page. Similar way as customized dropdown.

Anyway, IMO the navigation (even MegaNav) should be simple, clear and understandable tool for clients to navigate over your site and not cockpit of spaceship with hidden features ;)

m2c

5

I know…it’s way too complicated and not UX friendly…I’ll try to change my client’s mind about it, thank you :slightly_smiling_face:

1 Like
6

introducing an extra element is the way as hover and click is IMO unpractical and technically impossible.

7

Yes that’s what I’m going to tell them, and I changed the tabs links to be hovers instead of clickable links so that it’s easier. But I can’t put another link div inside the tabs Elements though…so the only solution is to add the link to the right side ?

8

thing about that like this.

  1. I need one wrapper with two items set as eg. inline elements and wrapper as flex or … whatever. _(have elements next to each other)
  2. each element should be single threaded, one link to page, second open sub

Questions

  1. do I need different color for each element as visual feedback for clients easily understand that they are two different things?
  2. should whole set should look like button?
  3. does arrow open page or side menu?
  4. is this necessary?
  5. How website visitor will benefit from it. Is this good UX?
  6. I there another approach?
9

I would not say only but “better”

one element - one functionality (purpose)

10

The client doesn’t want to change his mind…he sent me a link to a website that has a menu that uses hover and clickable states on the same links : https://www.speechi.net/fr/ so I guess there is a way to do that, but I don’t know how :woman_shrugging:

11

I couldn’t make the solution of Stan work I don’t know why but I found another solution on the forum thanks to @FlowerLuca ! You can put HTML Embed into the tabs elements which allows you to have 2 links inside of one, I know it’s not user friendly but that’s what the client wanted. Thank you everyone :slightly_smiling_face:

1 Like
12

hi @Alicia_MONTAGNE when you check the second navigation element you can click on any of these but they redirects to one identical website (As it does main top element it self. ) so there is only one link https://speechi.com. You can tell to your client that is a difference :man_shrugging:

Also this nav is build like any another with ul and li as is standard and not with tabs that have different purpose. But I can be wrong as there may be some navs build this way.