src/content/community/guidelines/module-navigation.html - netbeans-website-cleanup - Git at Google

 <html>
 <head>
 <title>Customising your website's navigation</title>
 <meta name="description" content="A guide to customising netbeans.org module website's navigation">
 <meta name="TOPIC" content="NB_ORG">
 <meta name="TYPE" content="ARTICLE">
 <meta name="AUDIENCE" content="NBDEVELOPER">
 <meta name="Author" content="jcatchpoole@netbeans.org">
 <link rel="stylesheet" type="text/css" HREF="../../netbeans.css">
 </head>
 <body>

 <P><H1>Module Website Navigation</H1>

 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.

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

 <P><h2><a name="file">The File</a></h2>
 In every module's website checkout, you will find a file <B>left-nav.js</B>.
 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.

 <p>For new module sites, or if you want to start from scratch,
 <a href="https://netbeans.org/files/documents/4/474/left-nav.js">grab a left-nav.js template here</a>

 <p><h2>Dynamic Navigation</h2>

 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.

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

 <p>
 <ul>
 <li>Files
 <li>News
 <li>Docs
 <li>FAQs
 </ul>

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

 <p>
 <ul>
 <li>Files
 <li>News
 <li>Docs
 <br>&nbsp;&nbsp;&nbsp;4.1
 <br>&nbsp;&nbsp;&nbsp;4.0
 <br>&nbsp;&nbsp;&nbsp;3.6
 <li>FAQs
 </ul>

 <p>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 :

 <p><pre class="examplecode">
 document.write('  &lt;div class="leftmenug"&gt;');
 document.write('    &lt;div class="leftmenuitem"&gt;&lt;a href="/xyz">Files&lt;/a>&lt;/div&gt;');
 document.write('  &lt;/div&gt;');
 document.write('  &lt;div class="leftmenug"&gt;');
 document.write('    &lt;div class="leftmenuitem"&gt;&lt;a href="/xyz"&gt;News&lt;/a&gt;&lt;/div&gt;');
 document.write('  &lt;/div&gt;');

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

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

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

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

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

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

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

 <P><h2><a name="icon">Problems, Feedback</a></h2>
 If you have any problems or questions, please contact
 <a href="https://netbeans.org/about/contact_form.html?to=1">webmaster</A>.
 General feedback and suggestions are always welcome of course!

 </body>
 </html>
	<html>
	<head>
	<title>Customising your website's navigation</title>
	<meta name="description" content="A guide to customising netbeans.org module website's navigation">
	<meta name="TOPIC" content="NB_ORG">
	<meta name="TYPE" content="ARTICLE">
	<meta name="AUDIENCE" content="NBDEVELOPER">
	<meta name="Author" content="jcatchpoole@netbeans.org">
	<link rel="stylesheet" type="text/css" HREF="../../netbeans.css">
	</head>
	<body>

	<P><H1>Module Website Navigation</H1>

	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.

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

	<P><h2><a name="file">The File</a></h2>
	In every module's website checkout, you will find a file <B>left-nav.js</B>.
	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.

	<p>For new module sites, or if you want to start from scratch,
	<a href="https://netbeans.org/files/documents/4/474/left-nav.js">grab a left-nav.js template here</a>

	<p><h2>Dynamic Navigation</h2>

	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.

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

	<p>
	<ul>
	<li>Files
	<li>News
	<li>Docs
	<li>FAQs
	</ul>

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

	<p>
	<ul>
	<li>Files
	<li>News
	<li>Docs
	<br>   4.1
	<br>   4.0
	<br>   3.6
	<li>FAQs
	</ul>

	<p>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 :

	<p><pre class="examplecode">
	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>');
	</pre>

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

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

	<p><pre class="examplecode">
	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>');
	</pre>

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

	<p><pre class="examplecode">
	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>');
	</pre>

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

	<P><h2><a name="icon">Problems, Feedback</a></h2>
	If you have any problems or questions, please contact
	<a href="https://netbeans.org/about/contact_form.html?to=1">webmaster</A>.
	General feedback and suggestions are always welcome of course!

	</body>
	</html>