Question 55700 in Html Question posted in
Some basic documentation can be found here.

Element bouncing effect – Html

I can’t figure out what properties should be added to the elements to remove the jumping effect (I want to fix it). Maybe you should use grid? All parameters should remain as they are (the font cannot be changed)

.nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: inline-block;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
}

.nav-list__link:focus {
  color: #8428f8;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.3s;
}
<nav class="nav">
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link" href="#about">About me</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#experience">Experience</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#skills">Skills</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#projects">Projects</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#cv">CV</a>
    </li>
  </ul>
</nav>
Tags:

3

Answers


  1. 0

    There seems to be both a vertical and horizontal "jump" taking place.

    For the vertical jump, I think you’ll need align-items: baseline on the flex container.

    For the horizontal jump, the root cause seems to be the font-weight transition. Unfortunately, without variable fonts, a truly smooth animation is impossible (and the original question asked to not change the font). However, a similar (not identical) effect can be achieved using text-shadow. The original idea for this workaround came from this answer.

    Both solutions listed above are demonstrated in the snippet below.

    .nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  align-items: baseline;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: inline-block;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
}

.nav-list__link:focus {
  color: #8428f8;
  text-shadow:
    -0.2px -0.2px 0 #8428f8,
    0.2px -0.2px 0 #8428f8,
    -0.2px 0.2px 0 #8428f8,
    0.2px 0.2px 0 #8428f8;
  transition: all 0.3s;
}
    <nav class="nav">
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link" href="#about">About me</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#experience">Experience</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#skills">Skills</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#projects">Projects</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#cv">CV</a>
    </li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    To remove the jumping effect when the link is clicked, you can add outline: none; to the .nav-list__link:focus selector. If not, change or remove transition: all 0.3s;

    Login or Signup to reply.
  3. 0

    In order to prevent this behavior you can use transform property with scale. You can read more on MDN.

    Snippet:

    .nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: inline-block;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
}

.nav-list__link:focus {
  color: #8428f8;
  /*
  font-weight: 800;
  font-size: 16px;
  */
  transform: scale(1.1); 
  transition: all 0.3s;
}
    <nav class="nav">
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link" href="#about">About me</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#experience">Experience</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#skills">Skills</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#projects">Projects</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#cv">CV</a>
    </li>
  </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search