How can I implement a functioning tab-navigation behavior?

What I want to achieve is a underlying animated bar for each navigation-item that has been clicked.

The transition-related styling is supposed to be based on css pseudo-elements.

Below is the markup and the css-rules I came up with so far.

What am I missing in my code? How could the approach be fixed?

li::after {
  border-radius: 2px;
  border-bottom: red solid 3px;
  transition: all .3s ease-in-out;
}

li::before {
  content: "";
}

<nav>
  <ul >
    <strong>
      <li onclick="tabs('avisos')">Avisos</li>
      <li onclick="tabs('atividades')">Atividades</li>
      <li onclick="tabs('trabalhos')">Trabalhos</li>
      <li onclick="tabs('provas')">Provas</li>
      <li onclick="tabs('aulas')">Aulas</li>
    </strong>
  </ul>
</nav>

CodePudding user response：

Regarding the provided ::after rule there is no definition of how the pseudo-element should be display-ed in addition to the also missing content attribute.

And for the entire example as is, there is no need for a JavaScript based solution.

A css-only variant of the OP's code could use e.g.

• a :hover based approach.

And regarding the ::before/::after pseudo-element based transition-effect

• height, in my opinion, is a more intuitive attribute to go for.

.nav_link {
  width: 20%;
  list-style-type: none;
  font-weight: bolder;
}
.nav_link li {
  position: relative;
  margin: 5px 0 7px 0;
}
.nav_link li::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 100%;
  width: 100%;
  height: 0;
  background-color: red;
  transition: height .3s ease-in-out;
}
.nav_link li:hover {
  cursor: pointer;
}
.nav_link li:hover::after {
  height: 2px;
}

<nav>
  <ul >
    <li>Avisos</li>
    <li>Atividades</li>
    <li>Trabalhos</li>
    <li>Provas</li>
    <li>Aulas</li>
  </ul>
</nav>

Due to the markup, provided by the OP, the above example does not support a behavior similar to the OP's intended script-based click handling.

A small markup change could solve this though and supports tab navigation too.

.nav_link {
  width: 20%;
  list-style-type: none;
  font-weight: bolder;
}
.nav_link a {
  display: block;
  width: 100%;
  position: relative;
  margin: 5px 0 7px 0;
  padding-left: 5px;
}
.nav_link a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0;
  background-color: red;
  transition: height .3s ease-in-out;
}
.nav_link a:hover {
  cursor: pointer;
}
.nav_link a:hover,
.nav_link a:focus {
  outline: 1px dashed red;
}
.nav_link a,
.nav_link a:hover,
.nav_link a:focus,
.nav_link a:active,
.nav_link a:visited {
  color: black;
  text-decoration: none;
}
.nav_link a:target::after,
.nav_link a:focus::after,
.nav_link a:active::after {
  height: 2px;
}

<nav>
  <ul >
    <li>
      <a name="avisos" href="#avisos">Avisos</a></li>
    <li>
      <a name="atividades" href="#atividades">Atividades</a>
    </li>
    <li>
      <a name="trabalhos" href="#trabalhos">Trabalhos</a>
    </li>
    <li>
      <a name="provas" href="#provas">Provas</a>
    </li>
    <li>
      <a name="aulas" href="#aulas">Aulas</a>
    </li>
  </ul>
</nav>

CodePudding user response：

You're probably looking for li:active or li:visited Note that when using li:active, the item will only be underlined while the mouse button is down.

More here