Colin Neller - Separate your behavior from your markup: A Simple CSS Javascript Menu

Friday, March 23, 2007

« "Have I Piqued your Interest?" or "pique... | Main | Live Writer »

Separate your behavior from your markup: A Simple CSS Javascript Menu

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');

CSS | JavaScript

Saturday, March 24, 2007 12:52:54 AM (Central Daylight Time, UTC-05:00)

Disclaimer | Comments [0] |

Name
E-mail	(will show your gravatar icon)
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u`)
Enter the code shown (prevents robots):