Have you ever wanted to make the buttons on your webpages remain highlighted when they are clicked and active? I mean, wouldn’t it be great to use CSS to not only make your buttons and tabs change colour when hovered over but to give them a different appearance once they have been clicked?
The trick to changing the appearance of a clicked button or link and fixing that appearance for the time its page is active is to set a CSS style for the simultaneous occurrence of separate conditions. Don’t worry, it’s easy done than said.
Imagine we have two webpages and a menu that links to both pages; and all we want to do is ensure that whenever the link to Page One is clicked then the “Page One” tab changes from dark red to bright red and whenever the link to Page Two is clicked, the “Page One” tab returns to dark red and the “Page Two” tab becomes bright red. For example:
| STATE | MENU APPEARANCE | |
|---|---|---|
| Neutral | Page One | Page Two |
| Active Tab: Page One | Page One | Page Two |
| Active Tab: Page Two | Page One | Page Two |
To achieve our aim we must give three instructions to web browsers:
1. Whenever it is browsing Page One it must highlight the menu tab for “Page One”;
2. Whenever it is browsing Page Two it must highlight the menu tab for “Page Two”; and
3. It must not highlight tabs for pages it is not browsing.
The third item generally takes care of itself but the first two items require specific CSS instructions that are triggered by the co-incidence of two element IDs within the HTML of affected and effecting pages. To do this, we:
1. Assign an id to the <body> tag, and
2. Assign an id to every <a> tag within our menu.
Remember that IDs are unique within a page so no two tags (elements) can have the same ID.
So we could have tags like these:
<body id=”pageone”>
<a id=”itemone” href=”#”>Page One</a>
<a id=”itemtwo” href=”#”>Page Two</a>
and
<body id=”pagetwo”>
<a id=”itemone” href=”#”>Page One</a>
<a id=”itemtwo” href=”#”>Page Two</a>
Our CSS would look like this:
a
{
background: #a1012e;
}
body#pageone a#itemone,
body#pagetwo a#itemtwo,
{
background: #c66681; /* active button’s colour*/
color:#000000;
border: 2px ridge #cdd5da;
}
For ease of understanding, here’s a quick reference table of the CSS for <body> and <a> IDs:
| ID | body#pageone | body#pagetwo |
| a#itemone | Highlight #itemone | Do nothing |
| a#itemtwo | Do nothing | Highlight #itemtwo |
The CSS tells a browser to check the ID of the <body>, compare it with the ID of the <a> tag and determine whether any specific styling should be applied. It’s like having two light switches and seeing whether they are both on, both off, one’s on and the other’s off or the other is on and the one is off. In our case, when the browser is on Page One it reads the <body> ID as #pageone so highlights the <a> tag with ID #itemone and does nothing with #itemtwo. It does similar when it is on Page Two.
It is a lot easier to impliment than it looks and the same methodology can be applied to any page element i.e it is not restricted to menus, buttons and links, it could easily be applied to pictures or adapted to work when three or more conditions are met such as on a page within a <div> that’s within another <div>.
I’ve created an annotated example site with this method of highlighting active tabs using CSS and HTML in effect. Full CSS and HTML examples are provided for each page to make it easier to follow. You can visit it here
Go to part 2 to learn how to create glossy effect navbar buttons
Just to be clear about this, I didn’t develop the method described above, I found it on another website when I was learning HTML (the description is all my own work). Although it’s a natural development of HTML I’d like pass attribution to the author who taught it to me; unfortunately, I can not re-find his or her website but when I do I will note the details here.
wpDiscuz