- CSS Examples
- Potential problems and design decisions
- Which is better?
- Other possibilities and further reading
Fat links (also, one-to-many links, or multi-tailed links) are links that leads to multiple destinations. Futher discusion of why they are important. For more information, the Wikipedia article on the subject is suggested (though it is poor), and also Reviving Advanced Hypertext, an article from Jakob Nielsen written in 2005.
Fat links, where there is one link leading to multiple destinations, are not possible at this stage using just HTML. There are two work-arounds that many people use. One is to have multiple links in a sentence. E.g. for ages. What I think is new is the inline nature of these, using spans rather than li lists or divs.)
There are two types of fat link. The first offers a list of options, and the user can select one. The second type opens all the linked to destinations at once. The example JS script offers both sorts, while the CSS version only offers the first sort.
Reasons people might use 'fat links' are many. They might offer a resource in multiple languages or formats, and want the user to choose (this is what the HTTP 1.1 header 300 is used for).
Using an external file
You want more? Create your own damn examples. Those two should be sufficient.
This uses links inside the HTML, with the links inside the span..
While trying to perfect the layout for the first JS display example, I thought, maybe it's possible using just CSS.
So, here are snook.ca.)as demonstration. (I think they all link to a place on the IANA website, rather than display on their own now though). As another demonstration, here are . (Based on CSS originally found at
A slightly nicer looking, but not as nice working, method is to make use of the CSS3 Target pseudo-class. Unlike the previous method, which just requires a hover, this requires an actual click to see the links. as demonstration. Here are .
Third CSS attempt. So, here areas demonstration. As another demonstration, here are .
This uses different HTML to the previous attempts. The obvious problem is that the text following the 'fat link' squashes into the fat link. So, here are surguy.net.). I think another problem with the whole affair is the extra, horrid, markup required. Bleh. (Originally based on CSS and HTML from
This attempt uses inline, rather than block, to display the fat links. It works well. Here are. One major problem is that if the 'fat' links go on to the next line, there is no way to click them.
This attempt is identical to the previous attempt, uses inline-block. Here are:. One major problem is that if the 'fat' links go on to the next line, there is no way to click them.
This is the same as attempt 1, except that there is no absolute. Which means it doesnt head off to the left. Here are snook.ca.)as demonstration. (I think they all link to a place on the IANA website, rather than display on their own now though). As another demonstration, here are . (Based on CSS originally found at
And what about
This one has simple CSS, only two spans plus the anchors.. But, as with ones above, if the link goes to the next line, it is impossible to click on them.
This one has simple CSS, using the focus pseudo-classes on an anchor, with the rest of the anchors in a sibling span. Four HTML specifications. It only works if you give the anchor focus, and then do not actually activate it. The first anchor also must have a href attribute, otherwise it can't be given focus.
This one has simple CSS, using the focus pseudo-classes on an anchor, with the rest of the anchors in a sibling span.. Let's see now. Same problem as 10 above.
four HTML specifications
Potential problems, and design decisions
How to record destinations
The problem with fat links in the present system of HTML is how to record the destination URLs. There are a few potential answers to this, including: in variables in the JS; having the destination URLs somehow in the HTML (perhaps in a class attribute); in a separate file, loaded by the JS. I use two different methods, for the first JS method, I load an external file. For the CSS methods and the second JS method, the anchors are inline in the text, but with "display:none". This is then changed when you click, or hover (depending on the method).
In the first JS example, a fatlink is just an ordinary link, using the <a> tag, linking to an ordinary XHTML file. While with the CSS methods and the second JS method,, the "fatlink" isn't actually a HTML <a> tag at all.
Which fat, what not?
The method decided upon to distinguish between a fatlink and an anchor which is not a fatlink is a simple class. <a class="fatlink">
What format should the file take
Due to limitations in JS and my understanding of JS, the file must be a valid XHTML file, with an extension of either "xhtml" or "xml". This file should contain at least one list (unordered <ul>) or ordered (<ol>)) with one or more list items (<li>). Each list item must contain only an anchor tag. This anchor tag must have a href attribute, and must have some text between the opening and closing tag. The rest of the file can be an ordinary XHTML file, perhaps with an explanation of its purpose.
How does this script work?
On page load, the script adds a "onclick" with with a return of whichever function, to each anchor with a class "fatlink" (it also makes sure that each anchor with that class has a unique id). When a fatlink is clicked, the XHTML file is loaded, and each <a> in a <li> is raided for the href attribute, and, if relevant, the text between the tags. Each location in a href is loaded if "loadall" is the fatlink type, else displayed in an unordered list next to the original anchor if displayall is the fatlink type.
How to use
Download the script, make your files as above, link to them from anchors with class "fatlink", preferably make sure that the fat links are different visually to ordinary links, add the load script to the file. This second step basically is: "window.onload = fat_addlink('displayall');" or "window.onload = fat_addlink('loadall');", depending on whether you want to display the link list, or just load all the anchors. (Note, unless you are manually adding onclick to the fatlinks (as is done in the examples above), you can only have one sort of fatlink on each page.)
CSS specific - What if a user doesn't have CSS
The links simply display after the "link" as ordinary text.
Which is better?
It depends on what you want. Neither JS method appears to work in MSIE 6, and I don't have access to any other version. The JS loadall method doesn't work in Ephinany 2.28 (with Webkit). The CSS methods all have problems, which vary, depending on the layout of the screen, and ordering of the text. And will probably not work in MSIE.
Other possibilities and further reading
This is not a topic that has wide spread discussion, however, there are some good pages out there. As well as looking at the pages referenced in the introduction, I suggested you browser the following pages:
- HTTP 1.1 300 Multiple Choices.
- Extend links in the XML Linking Language
- I saw someone suggest having the link go to a box inside the page that actually contains all the links.
- Multi-Head Multi-Tail Mosaic: Adding Parallel Automata Semantics to the Web