|go text: || - project - technical - [ examples ] - links -
||topics: || - horizontal - vertical - tabbed - [ multi section ] - printer style -

Multi Section Vertical Navigation Bar

  <html><head><title>common title prefix <!--$title?--></title>

  <style>
   a:link          { text-decoration : none ; color : #000080 ; }
   a:visited       { text-decoration : none ; color : #200060 ; }
   .navtable       { background-color : #E0F0FF ; }
   .navsect        { background-color : #F8F8FF ; }
   .navlist        { width : 9em ; volume : soft ; }
   H3              { text-align : right ; }
  </style>
  </head><body>

  <table cellspacing="0" cellpadding="4" width="100%" class="navtable"><tr>
  <td class="navsect" align="center"><a href="site.html"><b><!--$selected--></b></a></td>
  <td class="navsect" align="center"><a href="index.html">Overview</a></td>
  <td class="navsect" align="center"><a href="examples.html">Examples</a></td>
  </tr><tr colspan="3"><td></td></tr>

  <tr valign="top"><td class="navlist">   <!--mksite:multi-->
  <hr><a href="index.html">Overview</a>
  <br>-<a href="intro.html">Introduction</a>
  <br>-<a href="where.html">Related Work</a>

  <hr><a href="examples.html">Examples</a>
  <br>-<a href="loremipsum.html">Lorem Ipsum</a>
  <br>-<a href="nietzsche.html">Nietzsche</a>

      <hr><a href="impressum.html">Impressum</a>
  <br><a href="site.html">sitemap</a>
  </td><td bgcolor="white" colspan="2">

  </td></tr></table></body></html>

The multi section vertical navigation bar style is very similar to the earlier tabbed navigation bar style. It has only one difference: the magic hint <!--mksite:multi-->.

In the earlier tabbed navigation bar example the tabs were rather optional since all the sections were visible in the vertical bar as well. In the multi section view however they are the main navigation items to choose another section. Of course you are free to add quicklinks (indented with whitespace) as an additinal navigation help but we do not show that here.

What you should now look at is the fact that the left vertical navigation bar has none of the hrefs that do not belong to the current section - effectivly making only the pages of the current section visible plus any additional hrefs that were not seen by mksite.sh as being section hrefs. Btw, the actual implementation deletes the lines of the section hrefs in the source file (or commented them out). Since the <hr> tags were on the same line as their section header name they are gone as well.

Of course for such a low number of pages as in this example it turns out not be a good idea to go for multi section view. There are just three page href items left here which makes the user to click too often to get to the item she wishes for. But it really flies when you have more than 20 pages which will then add up in the left vertical navigation bar so much they span as far down as being not anymore visible in a browser view - not to speak of the human eye which can not easily catch more than 7-10 items.

- common title prefix - lorem ipsum -