Is there a way to make one column span the entire row, without shifting the other columns around?-CodePudding

I have a nav bar that I made with grid, and I'm trying to add an on hover style change that makes the selected column expand to fill the view-width, without pushing the remaining columns to the side.

Here is my html:

<nav >
    <div >home</div>
    <div >about us</div>
    <div >twitter</div>
    <div >instagram</div>
    <div >more...</div>
  </nav>

and my css:

.sticky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sticky > div {
  width: auto;
}

.sticky > div:hover {
  width: 100vw;
}

The behavior I'm trying to get is, for example, if the user hovers over the 3rd column (twitter), that column spans to the edge of the view-port on both sides, going over the other columns (rather then pushing them over like what it's currently doing).

The ones to the right of the hovered column aren't an issue, as they are hidden from overflow:hidden;, but the ones on the left stay stuck at the edge.

I've tried setting the div's position to absolute, but that causes issues when I start to animate with width, especially with columns other than the middle one.

How would I either push these off screen, or have the hovered column ignore the grid, and span absolutely over the other columns?

CodePudding user response：

Here is an example made with CSS only.

It uses ::before pseudo-element as a background to be animated on :hover.

Hope this will help!

Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sticky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sticky:hover > div:not(:hover) {
  z-index: 10;
  transition: all 0.3s linear 0.2s;
}

.sticky > div {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 1em;
  z-index: 100;
  transition: all 0.2s linear 0.3s;
}

.sticky > div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  transform-origin: center;
  transition: all 0.2s ease-in-out 0.3s;
  transform: scaleX(1);
}

.sticky > div:hover::before {
  transition: all 0.3s ease-in-out 0.2s;
  transform: scaleX(10);
}

.sticky > div:nth-child(1)::before {
  background-color: pink;
}

.sticky > div:nth-child(2)::before {
  background-color: orange;
}

.sticky > div:nth-child(3)::before {
  background-color: purple;
}

.sticky > div:nth-child(4)::before {
  background-color: teal;
}

.sticky > div:nth-child(5)::before {
  background-color: gray;
}

<nav >
  <div >home</div>
  <div >about us</div>
  <div >twitter</div>
  <div >instagram</div>
  <div >more...</div>
</nav>