A collegue of mine here at NOSE, Ortwin Glück, has adapted the navigation in the templates coming with magnolia 2.0 to work with simple HTML and CSS. It's the way we mainly do navigational menus here.
You'll find two files below, one contains the source code, the other one a template and the stylesheet which demonstrate the use of the menu renderer.
Source code:
- CssNavigationRenderer: the java class that does all the work.
- Html: provides some utility methods for dealing with HTML, notably code to escape characters that are senstive to
HTML interpreters
- StringArrays: tools for arrays of Strings.
Make sure you put these classes into their proper packages or to adjust the package statement according to your setup.
Template:
- cssnavigation.jsp: demonstrates the use of CSSNavigationRenderer.
- navigation.css: an example CSS
You'll have to put the template into your template directory and correctly announce it (see the tutorial for how to do this). You might want to put the CSS into the docroot directory.
With this, menus look roughly like this:
<div id="navigation">
<ul><li class="open"><a href="/www.a.com.html">main page</a>
<ul><li class="open"><a href="/www.a.com/de.html">Deutscher Ueberordner</a>
<ul><li class="active leaf">
<a href="/www.a.com/de/willkommen.html">Willkommensseite</a><ul></ul></li>
</ul>
</li><li class="closed"><a href="/www.a.com/en.html">English Uberordner</a>
</li></ul>
</li></ul>
</div>
Ortwin has published a guide on how to properly build CSS-based navigational menus on his home page:
http://www.odi.ch/prog/css/nav/index.php
There you'll find more infos on the inner workings and possible caveats.
In its previous incarnation on JspWiki, this page was last edited on Feb 9, 2007 10:11:25 AM by BorisKraft
Other known authors include :
