A: active link

F

Florida Flamingo

What exactly does using A:active do vs the others:

: link
: hover
: visited

I have a global menu bar at the top of each page. I am looking for the
ability to change the color of the link in the global tool bar to a
different color if I am actual viewing that page.

EX: Global tool page included a link to the news page. It is colored black
like all the othe links listed in the global tool page. Once you have
navigated to the news page, the link for that page has now changed to red in
the global tool bar. I thought that was what A: active link is used for but
I think I am wrong.

Any help is appreciated.
- Genie
 
J

Jim Higson

Florida said:
What exactly does using A:active do vs the others:

: link
: hover
: visited

Not sure exactly what the specs say, but in practice, it's the style applied
if you tab over the link. In some browsers it is also shown momentarily as
the link is clicked, and might still be applied when the back button is
pressed.
I have a global menu bar at the top of each page. I am looking for the
ability to change the color of the link in the global tool bar to a
different color if I am actual viewing that page.

I don't think this can be done in CSS. A scripting language like CSS is a
good way to do it though.
 
F

Florida Flamingo

Ok, so what you are saying is that "active" is the same thing as "hover".
Both have a rollover effect per~se. I guess I can eliminated one of them
from the CSS file.

Too bad about the other - it would have saved me a lot of work on menu's.

Thanks for you comments.
 
A

Andy Dingley

Not sure exactly what the specs say, but in practice, it's the style applied
if you tab over the link.

That's a:focus, not a:active

a:active applies (very briefly) when you _have_ (past tense) activated
the link, but navigation hasn't happened yet (future tense). You also
see it when the link has been "activated elsewhere", such as after
pressing Back, or when opening a link in a new tab. Firefox seems a
little buggy here and a control-click into a new tab leaves the old
link with quite a persistent :active state that takes a lot of nav
before it gets reset.

Spec (such as it is) is over here
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes


Here's a demo fragment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<title>CSS pseudo-class selector demostration</title>


<style type="text/css">

body {
color: #000000;
background-color: #ffffff;

font-family: sans-serif;
font-weight: bolder;
}

ul { margin: 3em }

a {
text-decoration: underline;
color: #59BF47;
}

..link-styles .link,
a:link {
color: #BF47BC;
}

..link-styles .visited,
a:visited {
color: #475CBF;
}
..link-styles .focus,
a:focus {
color: #47BF63;
}
..link-styles .hover,
a:hover {
color: #FF0000;
}
..link-styles .active,
a:active {
color: #BEBF47;
}
</style>


</head>
<body>

<h1>Link types and the :hover pseudo class selectors</h1>

<ul class="link-styles" style="float: left;" >
<li class="link" >a:link</li>
<li class="visited" >a:visited</li>
<li class="focus" >a:focus</li>
<li class="hover" >a:hover</li>
<li class="active" >a:active</li>
</ul>

<ul >
<li><a href="#" >A link</a></li>
<li><a href="#foo" target="_blank" >A link (targetted)</a></li>
<li><a href="http://www.google.com" >A link (visited)</a></li>
<li><a href="http://example.org/404" >A link (unvisited)</a></li>
</ul>

CSS specification</a>
<br><tt>http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes</tt></p>

</body>
 
J

Jim Moe

Florida said:
What exactly does using A:active do vs the others:

: link
: hover
: visited
a:active is the state a link becomes when it is activated (clicked). The
state is usually rather brief since it becomes a:visited when the new link
loads.
I have a global menu bar at the top of each page. I am looking for the
ability to change the color of the link in the global tool bar to a
different color if I am actual viewing that page.
Using a scripting language like PHP makes this type of work much easier.
(It could be done with Javascript but not everyone has it enabled.)
Create a function that outputs the menu code. The function's parameter
list tells it which menu item to not be a link, instead giving it the
style for "this page."
EX: Global tool page included a link to the news page. It is colored black
like all the othe links listed in the global tool page. Once you have
navigated to the news page, the link for that page has now changed to red in
the global tool bar. I thought that was what A: active link is used for but
I think I am wrong.
The closest you can get with CSS is a:visited, but it is not unique. If
you set it to red, all the other visited links are red as well.
 
J

Jonathan N. Little

Florida said:
What exactly does using A:active do vs the others:

: link
: hover
: visited

I have a global menu bar at the top of each page. I am looking for the
ability to change the color of the link in the global tool bar to a
different color if I am actual viewing that page.

EX: Global tool page included a link to the news page. It is colored black
like all the othe links listed in the global tool page. Once you have
navigated to the news page, the link for that page has now changed to red in
the global tool bar. I thought that was what A: active link is used for but
I think I am wrong.

active as said above is the brief moment when a link is activated. What
you want is essentially a 'breadcrumb' routine. I would require
scripting on your part to

1) identify what page you are on;
2) match it you what element in you navigation menu system
3) style effected element accordingly.
 
F

Florida Flamingo

Thanks for all the great answers. It looks like what I wanted to accomplish
is vastly over my head, as I don't write scripts.

I do appreciate finding the answer even if it wasn't as easy as I had hoped.

The help around here is awesome.

Thanks all.
 
J

Jim Higson

Florida said:
Thanks for all the great answers. It looks like what I wanted to
accomplish is vastly over my head, as I don't write scripts.

Is is actually really easy in PHP because it can be put in the middle of
your HTML. You only need something like:

<div id="links">
<? if( $current_page == 'home' ): ?>
<span>HOME</span>
<? else ?>
<a href="http://www.example.com">HOME</a>
<? endif ?>
</div>


Not too bad, huh? There's a little more to it than that, but not a great
deal.
 
F

Florida Flamingo

Well... thank you. I will fool around with that and see what I can come up
with. Really appreciate the starter kit. :)
 
K

Kevin Scholl

Jim said:
Using a scripting language like PHP makes this type of work much easier.
(It could be done with Javascript but not everyone has it enabled.)
Create a function that outputs the menu code. The function's parameter
list tells it which menu item to not be a link, instead giving it the
style for "this page."

PHP is indeed one solution, but for those that may not have programming
knowledge or the server to support it... (see below)
The closest you can get with CSS is a:visited, but it is not unique. If
you set it to red, all the other visited links are red as well.

It actually can be done quite easily with only CSS. There are several
tutorials for it online; here's a pretty straight forward one:

http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

I've seen several sites that use this method, and have done several
myself with it, e.g., http://www.weathergrid.com/ .

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
J

Jim Moe

Kevin said:
It actually can be done quite easily with only CSS. There are several
tutorials for it online; here's a pretty straight forward one:

http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
Well, I was not considering having to do it all manually.
The method described above does not scale well; it needs a unique ID for
every page and menu item, a lot of cruft builds up in the CSS files. Using
SSIs does not scale easily either since a unique file is needed for each
page's menu.
 
J

Jonathan N. Little

Jim said:
Well, I was not considering having to do it all manually.
The method described above does not scale well; it needs a unique ID for
every page and menu item, a lot of cruft builds up in the CSS files. Using
SSIs does not scale easily either since a unique file is needed for each
page's menu.

My solution was to build a menu class in PHP. The class contains,
organizes and generates my menu and site map. The hierarchal structure
is stored in the object as such. It generated the IDs for both and uses
a scheme that encodes the page's location within the tree in the IDs.
'mm######', each number pair is a level's id so each level can have a
max of 99 pages. Therefore a page link with an id of 'mm020100' means it
is the first child of parent of menu 'mm0001' that is the 2nd child of
'mm02' that is the third child of the root 'mm'. The id is also the key
in an array of references to each 'leaf' akin to MS's 'all' in their DOM
for quick lookups.

Works for me. I can build my breadcrumb trail links and flag each parent
of a menu with an 'active' class when the menu is created...HTH
 
J

Jim Higson

Jonathan said:
My solution was to build a menu class in PHP. The class contains,
organizes and generates my menu and site map. The hierarchal structure
is stored in the object as such. It generated the IDs for both and uses
a scheme that encodes the page's location within the tree in the IDs.
'mm######', each number pair is a level's id so each level can have a
max of 99 pages. Therefore a page link with an id of 'mm020100' means it
is the first child of parent of menu 'mm0001' that is the 2nd child of
'mm02' that is the third child of the root 'mm'. The id is also the key
in an array of references to each 'leaf' akin to MS's 'all' in their DOM
for quick lookups.

Works for me. I can build my breadcrumb trail links and flag each parent
of a menu with an 'active' class when the menu is created...HTH

IMO, styling a link differently using CSS for the current page isn't the
best way because there isn't really any point in a page containing links to
itself.

I always prefer to replace links to the current page with span elements. I
give these the class "nonlink" or something like that so they can be styled
in a way that suggests they would be a link if they weren't not :)
 
J

Jonathan N. Little

Jim said:
IMO, styling a link differently using CSS for the current page isn't the
best way because there isn't really any point in a page containing links to
itself.

I always prefer to replace links to the current page with span elements. I
give these the class "nonlink" or something like that so they can be styled
in a way that suggests they would be a link if they weren't not :)

Actually I do that too. The object does not insert the href on the the
page that you are currently on. The "active" class is set on the links
of the parent path to root if the if the page is deep in the menu...
 
K

Kevin Scholl

Jim said:
IMO, styling a link differently using CSS for the current page isn't the
best way because there isn't really any point in a page containing links to
itself.

Unless the site architecture contains multiple levels, in which case the
nav item with the active state could act as both an indicator of what
section the user in is AND a quick link back to the sectional index.
I always prefer to replace links to the current page with span elements. I
give these the class "nonlink" or something like that so they can be styled
in a way that suggests they would be a link if they weren't not :)

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
K

Kevin Scholl

Jim said:
Well, I was not considering having to do it all manually.

Doesn't really involve any more manual coding per page that the PHP
solution presented on ALA. The only unique aspect is the body class
declaration.
The method described above does not scale well; it needs a unique ID for
every page and menu item, a lot of cruft builds up in the CSS files. Using

True, which is why I specified (in a part of my message that was
snipped) that this is a POSSIBLE solution for someone who doesn't have
the programming knowledge or the server capabilities to support it.
SSIs does not scale easily either since a unique file is needed for each
page's menu.

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
M

Mark Parnell

Deciding to do something for the good of humanity, Jim Higson
I don't think this can be done in CSS.

If you just want to change the colour it can, e.g. by setting a class or
id on the body tag. To make it so it is just plain text - not a link -
is certainly well beyond the capabilities of CSS.
A scripting language like CSS is a
good way to do it though.

Um, something like PHP or ASP perhaps? ;-)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top