Customizing a horizontal menu in Wix Studio

Ask the community
1

Hi

I’m working on standard horizontal strikethrough menu in Wix studio and I was wondering if any here knows how to slow down the expansion of the strikethrough in CSS so it looks more drawn instead of instantaneous

He is a link to the site menu: https://awyricksolari.wixstudio.io/website-18/home

2

I would build that as a custom menu with elements in a container. You can then set the animations to suit exactly what you require when you click each element.

1 Like
3

Hi Dan, Thank you for your reply. I did try all variations available using the the elements and automation tools and more but they were either missing an action, link ability or trigger for the menu to work properly.

I contacted support to go over the issues and to get some ideas and as suspected the best way to achieve the menu’s flow to the way the client would like is by using CSS to change the expansion parameters of the menu text strikethrough.

I also reached out to some coders in the marketplace but I am sorry to say that I ended up getting quotes from people that had a few different companies posted but were actually the same people with each quoting me prices high enough that I could build a room extension on my house.

I’ve worked in the industry a long time and been with Wix starting in 2009 so I’m not that naive to what work like this should actually cost.

Bottom line, I was hoping to find someone in the community with a good understanding of CSS that I could pay to have the work done and after work on something similar for some of my new templates like the menu for this theme: https://jamesgelinas.wixstudio.io/alphoto

Once again thank you for getting back to my question so quickly.

All the best,
James

4

I see yuor point. I did try this but it didnt work as expected even when adding to the menu-item_label. It was not animating correctly. Will look into it more when I have some spare time.

/* Initial state of the menu item */
.menu-item {
  position: relative;
  display: inline-block;
}

/* The strikethrough effect, initially hidden */
.menu-item.selected::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 100%;
  height: 2px; /* Adjust the thickness of the strikethrough line */
  background: black; /* Adjust the color of the strikethrough line */
  transform: scaleX(0);
  transition: transform 0.5s ease; /* Adjust the duration of the transition */
  transform-origin: left;
}

/* When the item is selected, expand the strikethrough */
.menu-item.selected::after {
  transform: scaleX(1);
}