Module Website Navigation

The navigation links and text displayed in the left hand navigation column of a netbeans.org module website are customisable, and can even be made to appear dynamic, ie different navigation displayed depending on the page the browser is viewing.

This functionality does require Javascript. Visitors without Javascript enabled will see a fixed set of static links for all pages on a module website.

The File

In every module's website checkout, you will find a file left-nav.js. This is a javascript file which is included in every page served from your website. The file is very straightforward. Simply edit the links and text in this file, and check your changes in to CVS - they should immediately appear on your website.

For new module sites, or if you want to start from scratch, grab a left-nav.js template here

Dynamic Navigation

You can set up your navigation so that a different set of nav links is displayed for each page - or rather for each directory - on your site. Take this example.

When visiting http://foo.netbeans.org/index.html, a visitor sees :

• Files
• News
• Docs
• FAQs

Assume a user clicks the "Docs" link, to arrive on http://foo.netbeans.org/docs/index.html. The navigation could now look like :

• Files
• News
• Docs
     4.1
     4.0
     3.6
• FAQs

To do this, you would edit the left-nav.js in the root of your website, ie foo/www/left-nav.js, to look like :

document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem"><a href="/xyz">Files</a></div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem"><a href="/xyz">News</a></div>');
document.write('  </div>');

document.write('<script src="local-left-nav.js" type="text/javascript"></script>');

These links are fixed, and will display at the top of your navbar for all pages on your site. Next come the "dynamic" links.

Still in the root directory, create a new file called local-left-nav.js. local-left-nav.js/foo/www/ looks like :

document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem"><a href="/docs/index.html">Docs</a></div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem"><a href="/faqs/index.html">FAQs</a></div>');
document.write('  </div>');

Now, in the docs subdirectory of your website, create another local-left-nav.js file. foo/www/docs/local-left-nav.js looks like :

document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem">Docs</div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('        <div class="leftmenuitem"><a href="/docs/41.html">4.1</a></div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('        <div class="leftmenuitem"><a href="/docs/40.html">4.0</a></div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('        <div class="leftmenuitem"><a href="/docs/36.html">3.6</a></div>');
document.write('  </div>');
document.write('  <div class="leftmenug">');
document.write('    <div class="leftmenuitem"><a href="/faqs/index.html">FAQs</a></div>');
document.write('  </div>');

This is just an example, but it serves to illustrate how the setup works. Any navigation items that should change between pages need to be in local-left-nav.js files, one for each directory where the nav looks different.

Problems, Feedback

If you have any problems or questions, please contact webmaster. General feedback and suggestions are always welcome of course!