dizzL dizzL - 2 months ago 6
HTML Question

Making navbar link filled while on current page

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 site. I am currently a student in Software Development creating a website project.

HTML:

section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
<h2>Nav bar test</h2>
<nav class="fill">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>


CSS:

/*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;
}
}

Answer

The best practice is just to add an "active" class to the current page button.

<li><a href="index.html" class="active">Home</a></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.