Highlight active tab

HTML & CSS
1

Hi, I have a horizontal nav bar that works fine. Is there any way to keep the active highlighted? Help would be greatly appreciated.
html:

<div id="tabs">
  <ul>
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="home.htm"><span>Why Me?</span></a></li>
   </ul>
</div>

CSS:

 body {
	font: bold 13px/1.5em Verdana;
	}

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:0;
	}

hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}
	
#tabs {
	float:left;
	width:100%;
	background:#B5D7F7;
	font-size:80%;
	line-height:normal;
	font-weight:bold;
	}

#tabs ul {
	margin:0;
	padding:10px 10px 10px 10px;
	list-style:none;
	}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}

#tabs a {
	float:left;
	background:url("mtableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
	}

#tabs a span {
	float:left;
	display:block;
	background:url("mtabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
	}

#tabs a:hover span {
	color:#FFF;
	}

#tabs a:hover {
	background-position:0% -42px;
	}

#tabs a:hover span {
	background-position:100% -42px;
	}
2

You may need to elaborate on what you are trying to do as the code above just looks like you are linking to another page?

e.g.

<a href="home.htm"><span>Why Me?</span></a>

Is that link taking you to a new page or do you have some js that opens an html/css tab for you in the same page? I mean is it something like this:

Clicking on the top level opens a tab underneath. If so then you need to use a script as in that demo (or maybe the checkbox hack or :target for a non js version although that complicates the html a lot).

Or do you have another purpose in mind?

If you are navigating to a completely new page then you would add a new class in that new page to highlight the menu item using some custom css (basically mimicking your hover styles in the new class).

e.g.

<a class="active" href="home.htm"><span>Why Me?</span></a>

You’d do that on each new page as required.

(Note: I’ve used active for the classname but don’t confuse that with. the css pseudo-class :active which is just the state when an element is clicked and then disappears when released.)

3

PaulOB, thanks for the quick response.
Yes, I’m just trying to switch to another page.
I have added a new class as per your e.g. and mimicked the hover styles in the CSS but, alas, does not seem to make a difference. The tab does not stay highlighted.

4

I think we may be talking at cross purposes as I’m still not clear on your process.

At the moment you have two links that link to different pages. If you click a link you go to a different page.

I was assuming that when you arrived on that page you wanted the menu item for that page to be highlighted. If so you would add a new class as I suggested and style it as you wish. There should be no problem with this as long as you follow the rules of specificity.

Or do you mean that before the new page loads the link that you just clicked stays highlighted until the new page loads? Which may be almost instant for a light page.

If that’s what you meant then you may be talking about the :focus pseudo class which will stay focused until the focus is moved elsewhere or the new page loads on top.

Or was there something else you wanted that I misunderstood?

1 Like
5

Ok, maybe I did not explain myself correctly, probably comes with age (I am 78).
I have 7 tabs (just did show 2 of them) for 7 web pages. When I switch from one to another, I’d like to have that active tab stay highlighted with the hovering color (it’s actually a 2-part gif) until I switch to the next page. Site visitors should know on which of the 7 pages they are. Does that explain things better?

6

That seems to be exactly what I’ve given you already. :slight_smile:

  1. You click a link and the browser navigates to the new page (the old page is now gone and nowhere in sight).

  2. in the html for the new page you shuold have a class added to the current menu item.

For example:

On the index page you would have this.

<div id="tabs">
  <ul>
    <li><a class="active" href="index.html"><span>Home</span></a></li>
    <li><a href="home.htm"><span>Why Me?</span></a></li>
  </ul>
</div>

But on the home page.htm the html would be like this with the class moved to the home link.:

<div id="tabs">
  <ul>
    <li><a  href="index.html"><span>Home</span></a></li>
    <li><a class="active" href="home.htm"><span>Why Me?</span></a></li>
  </ul>
</div>

You would follow that process for all the other pages moving the active class to the link it refers to.

Then you duplicate the hover styles for the active class.

#tabs a:hover span,
#tabs a.active span {
  color: #fff;
}

#tabs a:hover,
#tabs a.active {
  background-position: 0% -42px;
}

#tabs a:hover span,
#tabs a.active span {
  background-position: 100% -42px;
}

If you want the link to stay active for the second the page disappears then use :focus as well.

e.g.


#tabs a:hover span,
#tabs a:focus span,
#tabs a.active span {
  color: #fff;
}

#tabs a:hover,
#tabs a:focus,
#tabs a.active {
  background-position: 0% -42px;
}

#tabs a:hover span,
#tabs a:focus span,
#tabs a.active span {
  background-position: 100% -42px;
}

All the above assumes you are able to edit the menu on each page and are not using server side includes (SSI) or similar.

7

PaulOB,
As per your advice, I have created a new class but, alas, it does not work. I’m sure I have screwed up things. Could you please skim over the code/
Thanks,
Ed

html:

<div id="tabs">
  <ul>
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a class="tabson" href="home.htm"><span>Why Me?</span></a></li>
  </ul>
</div>

CSS:

body {
	font: bold 13px/1.5em Verdana;
	}

body#home a#homenav,
    body#products a#prodnav,
    body#faq a#faqnav,
    body#contact a#connav {
        color: #fff;
        background: #930;
    }
	
h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:0;
	}

hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}
	
#tabs {
	float:left;
	width:100%;
	background:#B5D7F7;
	font-size:80%;
	line-height:normal;
	font-weight:bold;
	}

#tabs ul {
	margin:0;
	padding:10px 10px 10px 10px;
	list-style:none;
	}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}

#tabs a {
	float:left;
	background:url("mtableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
	}

#tabs a span {
	float:left;
	display:block;
	background:url("mtabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
	}

#tabs a:hover span {
	color:#FFF;
	}

#tabs a:hover {
	background-position:0% -42px;
	}

#tabs a:hover span {
	background-position:100% -42px;
	}

#tabs a:tabson {
	float:left;
	background-image:url("mtableft.gif");
    margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
	}
	
#tabs a:tabson span {
	float:left;
	display:block;
	background-image:url("mtabright.gif");
    padding:5px 15px 4px 6px;
	color:#FFF;
    }
8

I don’t know why it doesn’t show the html as I copy/paste.

9

There is not a pseudo class called tabson! You had this:

#tabs a:tabson

It should be:

#tabs a.tabson

I’m. not sure why you repeated everything again though as you only need to copy the hover styles if you want the active tab to look the same as a hover.

You only need to add the new rule to the existing hover rules.

e.g.

#tabs a:hover,
#tabs a.tabson {
  background-position: 0% -42px;
}

That will style the hover and the tabson class at the same time. If you wanted the active different from the hover then you would separate those rules and do them individually with their different styles. However theres no need if you want them both to be the same.

Here is the full code.

tabs {
  float: left;
  width: 100%;
  background: #b5d7f7;
  font-size: 80%;
  line-height: normal;
  font-weight: bold;
}

#tabs ul {
  margin: 0;
  padding: 10px 10px 10px 10px;
  list-style: none;
}

#tabs li {
  display: inline;
  margin: 0;
  padding: 0;
}

#tabs a {
  float: left;
  background: url("mtableft.gif") no-repeat left top;
  margin: 0;
  padding: 0 0 0 5px;
  text-decoration: none;
}

#tabs a span {
  float: left;
  display: block;
  background: url("mtabright.gif") no-repeat right top;
  padding: 5px 15px 4px 6px;
  color: #fff;
}

#tabs a:hover,
#tabs a.tabson {
  background-position: 0% -42px;
}

#tabs a:hover span,
#tabs a.tabson span {
  background-position: 100% -42px;
  color: #fff;
}

I also notice that this code has now appeared in your post.

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
  color: #fff;
  background: #930;
}

If that relates to the tabs (although it doesn’t seem to have any of those ids) then that code will win out as it uses IDs which have higher specificity.

You need to put code inside 3 back ticks at each end of the code or use the code formatting icon in the top of the editor panel </>

10

PaulOB, it works now, thank you very much.
That odd CSS code was a remnant from a previous, unsuccessful attempt, it’s been removed.
Again, thank you very much for your help, it’s much appreciated.
Ed

1 Like
11

I have another question: Your last change made the whole thing work, but it also increased the font size considerably and I don’t know how. I need to add another tab but that would work only with a smaller tab font. I did try to alter all font occurrences in the style sheet but no dice. What would decrease the font size after your last change?
Thanks,
Ed

12

I didn’t do anything to the font-size. I just used your code which mentions the 80% font-size here:


tabs {
  float: left;
  width: 100%;
  background: #b5d7f7;
  font-size: 80%;
  line-height: normal;
  font-weight: bold;
}

Actually just noticed the hash (id) is missing in that snippet.

It should be this:

 
#tabs {
  float: left;
  width: 100%;
  background: #b5d7f7;
  font-size: 80%;
  line-height: normal;
  font-weight: bold;
}

Hopefully that will get you back on track :slight_smile:

13

Silly me! Yes, that was the culprit.
Many thanks,
Ed

1 Like