I've been working on a quick prototype of a CSS javascript menu. Here's the preview (click for live demo):
Doesn't look like much, but images could easily be added to dress it up. The best part is the HTML – there's not much to it. I used the example from this CSS javascript menu as my base and dressed it up from there. Here's the key: keep your script out of the HTML. By using IDs and relative DOM paths, you can significantly cut down on the amount of javascript that usually finds its way into the HTML. Notice that the only references to script are the script links at the top of the page:
1 <!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html
xmlns="http://www.w3.org/1999/xhtml"
>
3 <head>
4 <title>Untitled Page</title>
5 <link
type="text/css"
rel="stylesheet"
href="navbar.css"
/>
6 <script
src="prototype.js"
type="text/javascript"></script>
7 <script
src="scriptaculous.js?load=effects"
type="text/javascript"></script>
8 <script
type="text/javascript"
src="navbar.js"></script>
9 </head>
10 <body>
The rest of the HTML is as follows:
12 <div
id="menu">
13
14 <div
id="submenuContainer"></div>
15
16 <dl>
17 <dt
color="#ffaaaa"
selected><a
href="#">Menu 1</a></dt>
18 <dd>
19 <ul>
20 <li><a
href="#">Sub Menu 1.1</a></li>
21 <li><a
href="#">Sub Menu 1.2</a></li>
22 <li><a
href="#">Sub Menu 1.3</a></li>
23 </ul>
24 </dd>
25 </dl>
26
...
60
61 </div>
62
63 </body>
64 </html>
In order to do this, I use the help of the prototype javascript library. Prototype allows navigating the DOM in a painless fashion:
27 function initSubmenus() {
28 $$('#menu dd').each(function(dd) {
29 var st = dd.style;
30 st.display='none';
31 st.top='18px';
32 st.left='1px';
33 });
34 }
...
73 var submenu = $(this).next('dd');