Expanding menu

Code listing for xc.css

1. /*
2. * date: 2003-01-09
3. * info: http://inspire.server101.com/js/xc/
4. */
6. ul {
7. list-style: disc;
8. margin-left: 0;
9. padding-left: 1.5em;
10. }
12. li.xc {
13. list-style: none;
14. }
15. div.xcx, div.xcc {
16. position: relative;
17. display: inline;
18. }
19. li.xc>div.xcx, li.xc>div.xcc {
20. position: static;
21. margin-left: -1.5em;
22. float: left;
23. width: 1.5em;
24. }
25. div.xcx a, div.xcc a {
26. position: absolute;
27. left: -2em;
28. }
29. div.xcx>a, div.xcc>a {
30. position: static;
31. }
32. div.xcx a:link, div.xcx a:visited,
33. div.xcc a:link, div.xcc a:visited {
34. color: #000;
35. text-decoration: none;
36. font-family: "Courier New", Courier, monospace;
37. font-size: 75%;
38. font-weight: bold;
39. }

General notes

Hover over a line of code with your mouse to read the tips. A few of the styles listed above are optional, so here’s a quick rundown of what’s required for those that want to tinker about.

The expanding menu works by placing "[+]" or "[-]" text links inside list items. Since these links are part of each list item, and bullet points are normally outside (as markers), they do not line up. It’s not a good look (and not consistent with standard expanding menus).

The easiest way I’ve found to counter this, is to use margins to shift the list items back to align with the bullet points, then float the +/- control (using the same width) to push the text back into line. I’ve used 1.5em which seems to work well, however this is up to you, so long as you use the same size throughout.
[Note: em units are dependent upon font size. If you alter font size, you may have to adjust margin, padding, offset parameters accordingly. ]

Unfortunately, IE5.0 through 6.0 cannot handle the combination of negative margin and float. To counter this I’ve done a quick hack (which I hate doing) and used absolute/relative positioning on the control. The size adjustment mentioned above was needed for this.

The parent–child selector (which IE does not recognise) has been used to disable all the positioning code and specify the simpler margin/float solution for other browsers.

Messy, but it works (so far).

The rest of it, (colours, fonts, underlines, etc.) is open to your imagination.

Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.