Installation
Menu.js does not require any installation at all, you just have to include it into your HTML. Make sure you've also included prototype! After inclusion you have to initialize the Menu, by providing the ID of your menu and possibly some configuration settings.
Include into HTML
<script src="prototype.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script type="text/javascript">
Menu.init("menu", {"orientation": Menu.VERTICAL, "hidePause": 0.5});
</script>
Configuration
As seen above, all configuration options can be set in a JSON string. Available options:
- orientation (int; one of: Menu.HORIZONTAL, Menu.VERTICAL)
- showPause (float; in seconds; default: 0.0)
- hidePause (float; in seconds; default: 1.0)
- opacity (float; 0 = transparent, 1 = opaque; default: 1)
Example menu HTML
Please note: this is the required (and standard-compliant) syntax.
<ul id="menu">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/technology.html">Technologies</a>
<ul>
<li><a href="/markup.html">Markup</a>
<ul>
<li><a href="/markup_html.html">HTML</a></li>
<li><a href="/markup_xhtml.html">XHTML</a></li>
<li><a href="/markup_xml.html">XML</a></li>
</ul>
</li>
<li><a href="/css.html">CSS</a></li>
<li><a href="/javascript.html">JavaScript</a></li>
<li><a href="/prototype.html">Prototype JS</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
Example CSS: Horizontal menu
/* reset default styles */
#menu,
#menu ul { margin: 0; padding: 0; }
#menu li { list-style-type: none; }
/* first level */
#menu li,
#menu a { float: left; width: 100px; }
#menu a { display: block; background: #EEE; }
#menu a:hover,
#menu a.menu_open { background: #DDD; }
/* second level */
#menu ul { visibility: hidden; position: absolute; width: 100px; }
#menu ul a { background: #DDD; }
#menu ul a:hover,
#menu ul a.menu_open { background: #CCC; }
/* third level (colors) */
#menu ul ul a { background: #CCC; }
#menu ul ul a:hover { background: #BBB; }
Example CSS: Vertical menu
/* reset default styles */
#menu,
#menu ul { margin: 0; padding: 0; }
#menu li { list-style-type: none; }
/* first level */
#menu { width: 100px; }
#menu li,
#menu a { float: left; width: 100px; }
#menu a { display: block; background: #EEE; }
#menu a:hover,
#menu a.menu_open { background: #DDD; }
/* second level */
#menu ul { visibility: hidden; position: absolute; width: 100px; }
#menu ul a { background: #DDD; }
#menu ul a:hover,
#menu ul a.menu_open { background: #CCC; }
/* third level (colors) */
#menu ul ul a { background: #CCC; }
#menu ul ul a:hover { background: #BBB; }
Note: You might also want to check out the examples using the code above.