Making navbar link filled while on current page - html

Question

I am currently trying to create a navbar that fills when hovered over a link. However, I would also like to have the link filled (or highlighted) while on the relative page. Any help would be much appreciated!
Note: This code has been retrieved from an open source.I am new learner of web technologies and working for a web project.
/*NAVIGATION */
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 100vh;
}
nav {
width: 60%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
<h2>Nav bar test</h2>
<nav class="fill">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Downloads
</li>
<li>More
</li>
<li>Contact
</li>
</ul>
</nav>
</section>

Answer 1

The best practice is just to add an "active" class to the current page button.
<li>Home</li>
And add "a.active" to every "a:hover" that you already have so it has the same css.
nav.fill ul li a:hover,
nav.fill ul li a.active { /* Here */
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after { /* Here */
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after { /* Here */
width: 100%;
}
Here is an jsfiddle live example: https://jsfiddle.net/884o5sjs/
(To get help faster, remember to create your own jsfiddle next time)
You could add the class="active" to the current page dynamically with php (suggested) or even with jQuery (not suggested), but since it looks like you are using ".html" you will have to add it manually on each page.
Hope this helps.

Answer 2

Looks like you've already achieved your first task of having it highlight when hovered. I would do this in php because that's the language I'm most comfortable, but then you'd also have to run a web server on your computer so hopefully you get some more helpful tips from some of the Jscript pros on here. If you do have to resort to php, one way I commonly do this is by having a variable on the page that lets the header know what page you're on, and then a few if statements that coorespond and apply a .current-page style.
I'm probably doing it the long way, but I just haven't learned Javascript yet.
the if statement would look like this within the li of the ul of the nav... <li <?php if ($title == "Home) { echo "class='current-page'"; } ?>>Home and so on for each element in the ul with the corresponding title, and title declarations in the body of the page.