I'm currently attempting a do very specific kind of navigation bar for my website. The main 'feature' of it is that on hover over each menu item, the item itself grows, while both the item before and the item after moves x pixels away from the item.

The styling of these elements is what would perform these transformations, using the following:

.navitem{
  display:inline;
  transition: transform .75s ease-in-out;
}
.navitemRight {
  transform: translate(10px);
}
.navitemLeft{
  transform: translate(-10px);
}
.navitemCenter{
  text-shadow:0px 0px 1px black;
  transform: scale(1.20);
}

The problem is that there seems to be no way to apply these style whenever an item is hovered. It seems as though for each item, they should have these kind of stylings :

.item2 : hover ~ item 1{
   blabla
} 
.item2 : hover ~ item 3{
   blabla
} 

but they should generated somehow, since the navigation bar's items are dynamic.

I tried using React and really thought I was going to get away with it, where onm ouseEnter and onm ouseLeave changed the state of the component, and everytime, it would re-render the navbar, with the correct style, like so:

almost working but ugly when hover out

But it does not satisfy me because we only get the transform when hovering, and lose the transition whenever the state changes, which is why the change is so ugly when I hover out. For reference, here's an example of what it looks like when you have the same trasnform and transition:

simple transform

Anyways, I am sure there is a way to do it, using Javascript probably, maybe sass or Jquery, both of which im not really familiar with. If you have any idea, or maybe a reference to tools that could help me with that, it would be very apprecited!Thanks

CodePudding user response：

You can apply conditional classes on each element, based on your component state. The conditional classes will be added/removed based on template string literals

CodePudding user response：

Here's an example that does basically what you want, but through a different method. It's all in CSS so it will not have and rendering issues.

I've moved all .nav-links to the left 10px if they aren't being hovered (this is therefore their default state).

Once you hover on one this will increase in size by 1.2 as you would like.

All subsequent .nav-links after the hovered one (using the subsequent sibling selector ~) will move to the right by 10px to accomodate the increase in size.

You can fine tune this to your preferences, but at least it gives you a nice structure to work from and looks reasonably slick I think!

Demo

nav {
  padding: 0px 24px;
}
  
.nav-link {
  display: inline-block;
  transition: transform .75s ease-in-out;
  background: whitesmoke;
  height:20px;
  width:40px;
  padding: 4px 8px;
  text-align: center;
}


.nav-link:not(:hover) {
  transform: translate(-10px);
}

.nav-link:hover {
  transform: scale(1.2);
}

.nav-link:hover ~ .nav-link {
  transform: translate(10px);
}

<nav>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
<a class='nav-link'>Link</a>
</nav>