Changing the direction on an icon

Design help General
1

Is there a way to change the direction of the default drop down menu widget icon from down to up on a rollover.

2

Or replace the icon with a “+” and a “-” on pressed state. To collapse the drop down menu.

3

I would choose “on click” here, simply because I am a noob. :).

If you set it to hover, it will change back to its normal state when you leave the menu link and hover over a sub-item within the dropdown. That would be strange.

So here is how to change the Icon from up to down “on click”.

  1. Select the element “Nav Link” in your dropdown structure.

  2. Go to “Assets”

  3. Create a new interaction by clicking on the + icon and name it “Click Dropdown”

  4. Create a new “Trigger” → On Click

  5. Select “Affect different element(s)”
    5.1 Enter “Nav Icon” as element

  6. Choose for “First Click” a Rotation of 180 degrees.
    6.1 There will be a “500ms” delay (Ease) for the animation. If you want it to be instant, select “0ms”.

  7. Click done and for the “Second Click” just click on rotate (0 degrees).

Get out of there and test it. It should work.

Downside:
It will only change back if you click on the main dropdown menu element again. (in this case Details)

1 Like
4

This is somehow a bit more difficult.

There are maybe better ways out there, but this is my first thought about this:

You have to change the way I describe this here, but maybe you ll get the clue how it is done.

  1. I created a div container, in which all elements are placed.

  2. In that insert a “Link-Block”

  3. Give that “Link-Block” a class and the attribute “Positon: Relative”.

  4. Within that place two “Div Blocks”. Name one “nav-icon” and the other one “nav-icon-2”.

4.1 nav-icon will get the plus icon, nav-icon-2 the minus icon

  1. Apply the following styles to nav-icon
  • Position Absolute
  • Background-Image (a Plus-Icon as SVG, PNG…whatsoever) with no-repeat and a size.
  1. The same for nav-icon-2
  • Position absolute
  • Background-Image (a Minus-Icon)

  1. Set nav-icon-2 to “Display Setting: None”

  2. Click on the “Link Block”

  3. Goto “Assets”

  4. Create a new interaction called “Change Icons”

  5. Create a new “Trigger” on click

  6. Choose “Affect different elements”
    12.1 inser “nav-icon” here

  7. On “First Click” select “Display: none”

  8. On “Second Click” select “Display: Block”.

  9. Create a second “Trigger” on click

  10. Choose “Affect different elements”
    16.1 Inser “nav-icon-2”

  11. For “First Click” select “Display: Block”

  12. “Second Click” needs to be “Display None”.

Now youre ready to go.

What it does:
Since the overall container is set do “Position relative” and both Icon Containers are set to absolute, they sit above each other.

Then we only change the visibility of the relevant div element on click.

Here is a preview link:
Preview Icon Change