HTML/CSS Navigation active state
You must add a class to the active navigation element and styled it.
HTML:
<ul id="Navigation">
<li><a href="home.html">IC Home</a></li>
<li><a href="forum.html" class="active">IC Forum</a></li>
<li><a href="#contact.html">IC Contact</a></li>
</ul>
CSS:
ul#Navigation .active{
border-color: white;
border-left-color: black;
border-top-color: black;
color: white;
background-color: #adadad;
}
So on forum.html
the active class will be on the IC Forum link.
For the contact.html
will be on the IC Contact and so on...
Admin
Updated on July 09, 2022Comments
-
Admin almost 2 years
I'm new to
HTML
andCSS
and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey.Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the
HTML
. On index.html nothing should be activated as I wont be using that page later. It's just the standard side. For Example then I have Home.html, Contact.html and Forum.hmtl.If I open Index.html in my browser and in my Navbar click on Home I will be navigated to the at the moment exact same page like Index.html, but on this page i want the home navfield to be highlighted. Do I have to (in the Home.html) state that this field is active? How do I do that.
NAV: (in home.html currently the same as in index.html)
<ul id="Navigation"> <li><a href="home.html">IC Home</a></li> <li><a href="forum.html">IC Forum</a></li> <li><a href="#contact.html">IC Contact</a></li> </ul>
Do I have to put something which states that
<li><a href="home.html">IC HOME</a></li>
is active?This is how I did the hover effect in my css file:
ul#Navigation a:hover, ul#Navigation span { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: #adadad; }
and I thought i could just do the same for active:
ul#Navigation a:active, ul#Navigation span { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: #adadad; }
I'd really appreciate some help as I'm still new to this.