How to keep active menu item underlined? - html

Question

I'm really new to HTML and CSS. I have a navbar which underlines the menu item you hover with a fade in, fade out-effect from the middle,
but how can I keep an active menu item underlined with the same style?
I'm also using Typo3 / Fluid which creates me the html code and assigns the "active" class to the active menu item.
This is how it looks like so far: https://jsfiddle.net/wr5w09r0/
css
div#top_nav{
text-align: center;
}
div#top_nav li{
display: inline;
padding: 15px;
}
div#top_nav a {
display: inline-block;
position: relative;
}
div#top_nav a:hover{
color: orange;
}
div#top_nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: orange;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
}
div#top_nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active {
color: orange;
}

Answer 1

Hope this will help you. I have added this simple element.
div#top_nav a:hover:before , div#top_nav a.active:before
a {
text-decoration: none;
}
div#top_nav{
text-align: center;
}
div#top_nav li{
display: inline;
padding: 15px;
}
div#top_nav a {
display: inline-block;
position: relative;
}
div#top_nav a:hover{
color: orange;
}
div#top_nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: orange;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
}
div#top_nav a:hover:before , div#top_nav a.active:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active {
color: orange;
}
<div id="top_nav">
<ul>
<li class="mainMenu-itemLevel1">
seite1</li>
<li class="mainMenu-itemLevel1">
seite2
</li><li class="mainMenu-itemLevel1">
seite3</li>
<li class="mainMenu-itemLevel1">
seite4</li>
<li class="mainMenu-itemLevel1">
Seite5 lang Hover</li>
</ul>
</div>
Hope this will help you.

Answer 2

You need to use javascript to do this.
Your javascript would add a class, like active to the relevant menu item, and you can then use your css to style it appropriately.
After adding the active class to the element, to apply your orange style use this:
div#top_nav.active a{
color: orange;
}
Note the addition of .active which selects only active items, and the omission of :hover on the link, since you no longer care about hover.
You may find the , css operator useful here, for applying the same styles to different selectors (active, and hover) as shown in my example below:
var items = document.getElementsByClassName('item');
var activeClassName = 'active';
function unselectItems() {
for (var i = 0; i < items.length; i++) {
items[i].classList.remove(activeClassName);
}
}
function selectItem(item) {
unselectItems();
item.classList.add(activeClassName);
}
function onItemClick(event) {
selectItem(event.target);
}
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', onItemClick);
}
span {
border: 1px solid black;
padding: 5px;
}
span:hover, span.active {
color: white;
background-color: black;
}
<nav>
<span class="item">Home</span>
<span class="item">About</span>
<span class="item">Contact</span>
<nav>