tabbed menu

Forum Moderators: not2easy

Message Too Old, No Replies

tabbed menu

want tab color to reflect which page we're on

HelenDev

3:04 pm on Jul 21, 2004 (gmt 0)

I've just created an accessible tabbed menu with css using a tutorial. The tabs have curved edges and change color when hovered over. I want the hover color to stay if the tab is selected (this loads a new page). What is the best way to do this? I can post the code if necessary.

Cheers,
Helen

HiHo

3:06 pm on Jul 21, 2004 (gmt 0)

hi helen.... perhaps posting the code may help us! if you have followed the "scrolling doors in css" tutorial, you need to move the id selector

BlobFisk

3:10 pm on Jul 21, 2004 (gmt 0)

Hi HelenDev,

An easy way of doing this is to add an ID to you body tag.

Then in your CSS you can create a new rule that makes the tab for the current page a different style.

For example:

a.tab1 { color: #fff }

#tab1Page a.tab { color: #000; }

HTH

HelenDev

3:18 pm on Jul 21, 2004 (gmt 0)

Cheers guys. Here is my code:

<html>
<a class="nav" href="index.php"><span>home</span></a> 
<a class="nav" href="posters.php"><span>posters</span></a> 
<a class="nav" href="pressbooks.php"><span>pressbooks &amp; synopses</span></a> 
<a class="nav" href="#"><span>stills &amp; lobby cards</span></a> 
<a class="nav" href="#"><span>books</span></a> 
<a class="nav" href="comics.php"><span>comics</span></a> 
<a class="nav" href="#"><span>magazines</span></a> 
<a class="nav" href="#"><span>other collectables</span></a> 
</html>

...and here is the css...

A.nav:link{ 
color: #000000; 
background: #cccccc url("/images/left-menu-tab.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

A.nav:visited{ 
color: #000000; 
background: #cccccc url("/images/left-menu-tab.gif") left top no-repeat;
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold;
}

A.nav:hover{ 
color: #000000; 
background: #00CCFF url("/images/left-tab-hover.gif") left top no-repeat; 
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold; 
}

A.nav:active{ 
color: #000000; 
background: #00CCFF url("/images/left-tab-hover.gif") left top no-repeat; 
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold; 
}

a span{ 
background: url("/images/right-menu-tab.gif") right top no-repeat;
padding-right: 10px; 
}

a:hover span{ 
background: url("/images/right-tab-hover.gif") right top no-repeat; 
padding-right: 10px; 
}

I like the sound of the body id thing blobfisk. How exactly would I make it work with the code above?

createErrorMsg

3:33 pm on Jul 21, 2004 (gmt 0)

I believe BlobFIsk's solution involves giving both the body taga unique id and each of the 'tabs' a unique id. Then in the css you list a rule that singles out each body id and it's matching li id...

body#PageID1 li#TabId1 a, body#PageID2 li#TabId2 a, etc {
settings: for current page;
}

The page will apply those rules only when it matches all the criteria, i.e., when there is a body tag with an id="PageID1" and a list item with an id="TabId1" it applies the rules to the link tag.

If there's a way to do this without having to explicitly set that whole list of combinations, I'd love to see it, but even having to list it in the CSS is WAY better than having to update an id="current" on every page...

HelenDev

3:48 pm on Jul 21, 2004 (gmt 0)

each of the 'tabs' a unique id

I'm not sure I understand this part. My tabs are not <li>s - should they be?

BlobFisk

5:02 pm on Jul 21, 2004 (gmt 0)

createErrorMsg is correct, you need to assign a unique ID to each nav element. Let's say you wrap them in a span:

<html>
<span id="home"><a class="nav" href="index.php">home</a></span>
...
<span id="other"><a class="nav" href="#">other collectables</a></span>
</html>

Then in your CSS:

#homeID #home a.nav:link{
... Active Page Rules...
}

HTH

HelenDev

11:49 am on Jul 22, 2004 (gmt 0)

Hurrah! it works. I did as blobfisk suggested above and then added this to my css for each page:

#homephp #homelink a.nav:visited{ 
color: #000000; 
background: #00CCFF url("http://mydomain/images/left-tab-hover.gif") left top no-repeat; 
text-decoration: none;
font-size:10pt;
padding-left: 10px;
font-weight:bold; 
}

#homephp #homelink a span{ 
background: url("http://mydomain/images/right-tab-hover.gif") right top no-repeat; 
padding-right: 10px; 
}

Now I figured I only need to do this for the visited link, as it will be visited because they have just clicked on it. If anyone can foresee a problem with this please let me know.

This has delved me into more advanced css than I am used to but I think I get the idea. Can anyone point me to a good tutorial or reference for this kind of more complicated css?

createErrorMsg

11:59 am on Jul 22, 2004 (gmt 0)

The :visited pseudo class applies to links that have already been visited. This may not work since the css will look for links that have been visited to apply the rules to. Furthermore, it MAY apply the current tab to any page that has been visited, resulting in multiple current tabs. I use just a plain vanilla a as in...

body#PageOne li#LinkOne a {
blah blah
}

...this way it's not contingent upon any pseudo classes.

Check out Listamatic and several articles on A List Apart (Taming Lists and Suckerfish Dropdowns come to mind) for more advanced list/menu manipulation.

HelenDev

12:32 pm on Jul 22, 2004 (gmt 0)

I use just a plain vanilla a

Ah, I see. I'll do that :)

Cheers for all your help. I can see now that css can do all kinds of intersting things which I haven't yet explored.

BlobFisk

2:50 pm on Jul 22, 2004 (gmt 0)

I can see now that css can do all kinds of intersting things which I haven't yet explored.

You have no idea! ;)

drbrain

2:55 pm on Jul 22, 2004 (gmt 0)

No need to wrap, an element can have both an id and a class.

And you can push the class="nav" up one level too, and cut out 12 characters per tab:

tabbed menu

want tab color to reflect which page we're on

HelenDev

HiHo

BlobFisk

HelenDev

createErrorMsg

HelenDev

BlobFisk

HelenDev

createErrorMsg

HelenDev

BlobFisk

drbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week