A confetti menu
The colorful menu you see below is simply a DIV element with a few P elements inside. The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap, but if the text is too long, it overlaps so much that it becomes hard to read.
What’s new?
Learning CSS
CSS Browsers
Authoring Tools
Specs
CSS1 Test Suite
W3C Core Styles
CSS Validator
The style sheet allows for a menu of up to 10 elements, the example above uses 8. Here is the HTML source of the example above:
<div> <p id="p1"><a href="../../CSS/#news">What's new?</a> <p id="p2"><a href="../../CSS/#learn">Learning CSS</a> <p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a> <p id="p4"><a href="../../CSS/#editors">Authoring Tools</a> <p id="p10"><a href="../../CSS/#specs">Specs</a> <p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a> <p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a> <p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> </div>
Note the class “map” on the DIV element, which makes it into a container for the menu, and the ID attributes on the Ps. The P elements must each have a (different) ID, called p1, p2,… or p10. It is not necessary to use the IDs in order (as the example shows). You can use the style sheet by copying it into your own style sheet, or by using @import or a LINK element to import map.css directly from the W3C site: either
@import "http://www.w3.org/Style/map.css";
or
<link rel="stylesheet" href="http://www.w3.org/Style/map.css"> Source:w3.org
