Bollate

HTML

[ANSWERED] javascript – How to achieve a css pseudo-element based and transition based tab-navigation behavior and styling?

By

Nov 18, 2022 , , ,

Solution 1 :

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 class="nav_link">
    <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 support 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 class="nav_link">
    <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>

Solution 2 :

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

Problem :

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 class="nav_link">
    <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>

Comments

Comment posted by isherwood

You don’t have a

Comment posted by Rory McCrossan

Nothing in the code you’ve shown will do anything when one of the

Comment posted by isherwood

Also, a

Comment posted by A Haworth

There is lots wrong here – the only children of a ul that are allowed are li elements; the after pseudo element has no content but it also has no size nor is it clear whether it is to be positioned relative to the li or some other positioned ancestor, there is no event registered on, say, the li elements, and if that is to be done via JS and setting a class, the after pseudo element needs to have settings when the li has that class, not otherwise.

Comment posted by Alan Pereira

js

Comment posted by Alan Pereira

that’s the point, it’s to be underlined when clicked.

By

Related Post

HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022
HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022