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.
This is a simplified set of code; view the actual source code to see everything that's going on.
home 
examples 
docs 
tutorials
<script type="text/javascript" src="lib/jude.js"></script>
<script type="text/javascript">
jude.include( "widgets.menu" ) ;
jude.onload = function() {
menu( "MENU" ) ;
};
</script>
<!-- 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 ;
}
</style>
<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>
<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>
<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>
</div>
