White Arrow icon
Back to all Elements

Sliding Tabs Menu

A sliding background element placed behind the tabs menu. No custom code, only IX.2

A simple No-Code solution to a sliding tabs menu animation.

Using Interactions and positioning the sliding element absolutely behind the tabs menu, we can create an effect of sliding background.

Important points:

  • The wrapping tabs element must have any positioning bside 'Static' (so the moving background wrap element will position relative to it)
  • The sliding background element must have a constant width, which is equal to the menu link width.

Preview:

browser mockup
Share:
Heart icon

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon