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

Tabbed 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">
  <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 tabbed vertical navigation bar style is very similar to the earlier vertical navigation bar style. It adds two extra <tr>-rows where the first is filled with the section href's. Since they are inside a <td>-block they are not seen as defining the sections and do not interfere with the sitemap.

However as a special the mksite.sh script will see the hrefs inside the <td> and clear out any "class=" setting in it. That is the base for the tabbed style: the whole table was set with a darker background color as per "class=navtable" and the first row items were set differently with a lighter color by choosing "class=navsect". Now when the "navsect" style is wiped away for the current section href then the <td> will be drawn in the color of the table which is slightly darker.

As a special note you should watch for the final </td><td bgcolor="white" colspan="2"> which is now required since the middle body area should be drawn in white and not the dark background color of the table, and also we need to have it fully available for the body text thereby spanning the number of columns created by the tab-<td> definitions - here there are "2".

- common title prefix - lorem ipsum -