Menu Control

The document source for this example/widget is particularly interesting: notice that there is very little JavaScript involved. In testing, the menu widget degraded perfectly for 4.x browsers and Opera, resulting in four links across the top.

A sort of quasi-style is implemented in the menu widget: notice that the DIV containing the main links is styled with an attribute called “judestyle.” And for each link, the “submenu” attribute is available and necessary to associate a link to a submenu. This is a nice way to abstract the content from the scripting and layout and therefore supplements regular CSS.

Basic Source Code

This is a simplified set of code; view the actual source code to see everything that's going on.

<script type="text/javascript" src="lib/jude.js"></script>
<script type="text/javascript">
    jude.include( "" ) ;
    jude.onload = function() {
        menu( "MENU" ) ;

<!-- the style settings are completely up to you -->
<style type="text/css">
    #MENU {
        position      : absolute ;
        left          : 0px ;
        top           : 0px ;
        width         : 100% ;
        height        : 17px ;
        padding-top   : 2px ;
        border-bottom : 1px solid ;
    .sub-menu {
        position      : absolute ;
        visibility    : hidden ;
        padding       : 2px ;
        border        : 1px solid ;

<div id="MENU" judestyle="shadow:visible; spacing:20px">
    <a href="link1.html" submenu="SUBMENU1">menu heading 1</a>
    <a href="link2.html" submenu="SUBMENU2">menu heading 2</a>

<div id="SUBMENU1" class="sub-menu" judestyle="width:200px">
    <a href="sub1-link1.html">sub 1 link 1</a>
    <a href="sub1-link2.html">sub 1 link 2</a>

<div id="SUBMENU2" class="sub-menu" judestyle="width:150px">
    <a href="sub2-link1.html">sub 2 link 1</a>
    <a href="sub2-link2.html">sub 2 link 2</a>