One-to-Many Links Through CSS

One-To-Many Links in Web Media

Although we now know one way to create random hyperlinks to allow a more versatile journey through a web text, we have not moved any closer to giving control to the reader. Their only options are still clicking static outgoing links, or trusting to luck and clicking a random link- often not knowing which was which, unless some visual distinction is made in the page's CSS (for example a tag, appropriately styled). A menu of links, like the index on this page, allows the user a bit more control: they now can not only choose which links to go to, but refer to a menu to pick a link to a specific destination.

Menus are by nature large and unwieldy, and therefore unsuited for use within running text. A better solution would be a one-to-many link, with which a user may start from a single hyperlink and choose which destination they wish to arrive at. A simple way to execute this trick would be to have a link lead to a menu on a different webpage, but that further ruptures an inherently fragmented text. Implementing a basic CSS-driven popup link menu allows the creation of an in-line, less intrusive and accessible one-to-many link.

What Are Dropdowns?

A Dropdown menu is a condensed list of links. By hovering or clicking on the visible title or element, a menu appears to "drop down" from the title, generally containing a list of options or hyperlinks to other documents. Web development resource sites often contain explanations of ways to create basic navigational dropdowns. The CSS dropdown technique used in the "Light Side" and "Simple Dark" stylesheets for this page takes the basic navigation menu and renders it as a nested dropdown menu, adding the header "Navigation" for reference. Unfortunately, this method would not work if used to create a popup link menu within an existing paragraph, as <ul> and other list tags cannot legally exist within tags. In order to bypass this problem, use of the :hover CSS pseudo class on nested spans can create even more customizable and dynamic effects.

How It's Done

The basic principle of a popup within CSS rests on using the :hover attribute of an element to trigger a change in a nested element. In this case, hovering on the containing tag causes another tag nested inside to become visible, and to position itself over the text. The XHTML used is fairly straightforward. In the example below, the empty <a href=""></a> tags represent the contents of the popup menu, which will be displayed as separate lines in a vertical column (see example at page bottom).
<a href="#">Arbitrary Link Text</a><a href="">Menu Item 1</a> <a href="">Menu Item 2</a>

The actual CSS that drives the popup is not only in each of the 4 stylesheets this page uses, but redundantly displayed within a <style> tag in the header of this page's source. It is presented here with an accompanying explanation.

span.one2many span {
	display: none;
}

span.one2many {
	position: relative;
}

Necessary for the popup to appear over the original link.

span.one2many:hover span,
span.one2many span:hover {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;

	padding: .5em;
}

This is the actual code that drives the popup. These styles are only triggered when the mouse is hovering over the link itself or the resulting menu. By setting display: block;, the menu becomes visible as a block, which is then positioned with the top and left elements. Setting the z-index that high ensures that the popup will, in fact, pop UP, rather than appearing under other page elements. The last line dictates how much padding and space there will be around the menu's options.

span.one2many span {
	border: 2px dotted #444;
	background: #13141E;
	margin: 3px;
	font-size: 12px;
}

This is mostly formatting. Set the font size, font color, and menu background color here. A background color is essential, as the links are appearing above other text. Without some opaque backing it would become impossible to read the menu text. A border was added to mesh with all of my stylesheets; use is optional, style even more so.

span.one2many span a {
	text-decoration: none;
}

Another stylistic choice. I prefer hyperlinks in menus to not have their characteristic underline.

Code In Action!

If viewed within Mozilla Firefox (compatibility for this technique is currently low among other browsers), then hovering over thisDrum Machine
The Donuts... Hate You should display a menu.

>>> Continue to Switching Stylesheets >>>

Off-Site Links

Suckerfish Dropdowns, a CSS dropdown menu tutorial