HTML/CSS Navigation active state

Question

I'm new to HTML and CSS 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.

Answer 1

yes you need to change the nav on every html page. or you need some script to detect what page it is on. active only applied the style on your mouseDown on the link.

<ul id="Navigation">
    <li><a href="home.html" class="activePage">IC Home</a></li>
    <li><a href="forum.html">IC Forum</a></li>
    <li><a href="#contact.html">IC Contact</a></li>
</ul>

.activePage {
   // different style here. 
}

Answer 2

According to W3Schools

Definition and Usage The :active selector is used to select and style the active link.

A link becomes active when you click on it.

To highlight current page in the navigation you need to add extra class to mark the element as the active page (current page). for example you will have

#navigation li a.current{
   color: #ffffff;
   background:#f1d74c;
}

and the html

<div id="navigation">
    <li>
        <a ...> other page</a>
    </li>
    <li>
        <a class="current" ...>current page</a>
    </li>
</div>

It's a server-side thing -- when rendering the page, add a class like "current" to the link. Then you can style it separately from the other links.

For example

StackOverflow renders the links with class="youarehere" when it points to the page you're already on.

Answer 3

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...

Answer 4

Rather than just placing a class on a direct parent element, it can be beneficial to provide a base parent class on the body tag, allowing control over all elements within that page (if possible).

When doing that, you can use attribute selectors in CSS, like this and style as required:

    .page-contact [href^="contact"] { 
      //do something 
    }

I have provided a low-level example, here: http://codepen.io/seemly/pen/HIKlb

Also as you are new to HTML and CSS, take the following advice - there is no real need to use ID's in HTML for styling purposes. Ever. Use CSS classes instead.