How to create a menu item interaction

Design help General
1

Hey guys, really new to webflow. I am currently playing around and I want to build a website that has certain design elements throughout. Since the Logo is in brackets, I thought it would be a nice idea to add brackets in the design, too.
What I am trying is to create a navigation bar whose elements change on hover. What I need are brackets to show up. So “Home” would turn to “[ Home ]” on hover, “About us” would turn to “[ About us ]” etc.
What’s the most effective and correct way to do so?
Are Interactions required? Or maybe even scripts?
Thanks in advance to everyone who can lead me into the right direction!

Edit: I’ve added my share-link, because it was requested. This is just a quick 1 minute test to see if I could recreate the same effect by adding button borders. But well…the rounded borders don’t look like square brackets :slight_smile:

Read-only Share-Link: https://preview.webflow.com/preview/boulevard-influence?utm_source=boulevard-influence&preview=64c034e5e44def39fe85933f73296f1f

2

Hi @daniloz !

Can you share your read-only link please?

3

Hey Donald, sure! I didn’t add it because it’s just a quick 1 minute test to see if this is achievable with rounded button borders…which is not :stuck_out_tongue:

4

Hey @daniloz

Is this what you are trying to achieve?

https://cl.ly/2d950c

5

Hey donald, yes exactly! Minus the actual button, only the text :slight_smile:

6

Here you go!

https://cl.ly/6c8cc3

Here’s a read-only link so you can see how I made it:
https://preview.webflow.com/preview/brackets-on-hover?utm_source=brackets-on-hover&preview=2c2a756c6739bfcc1c8da0f96d12c003

The effect will only be visible in preview mode since it’s an interaction. All it is, is transparent brackets that change color on hover.

Do not hesitate if you need further help :slight_smile:

7

Thank you lots, Donald! Well…That was smart. And simple. Love it! It’s funny how sometimes you don’t think about the most simple stuff, first. Love it :slight_smile: Thanks!

8

Hi Donald,

I wonder how can I add the text elements(for brackets) inside the links elements, exactly as you did it by the link you shared?

00

9

Ok, I finally found out how to do this :slightly_smiling_face:. All I needed to do was the following:

  1. Add the link element;
  2. type the link text with the brackets already, for example “[ Home ]”;
  3. select the first bracket from this typed text and choose “Wrap with Span” option from the appeared menu;
  4. give a new class to this “Text Span” element, for example, “SquareBracket”;
  5. customize it (in our case make it’s color transparent);
  6. repeat the same for the second bracket.

And after that, we can make the interaction exactly as in the example kindly provided by @donaldsv.

10

I was wondering exactly the same and made a little workaround, but thanks for sharing your approach! :slight_smile: