project
- summary
- tutorial (2) (3)
(4) (5) (6) (7) (8) (9)
- usage (2)
technical
- reasoning
- two passes
- still tiny
- sitemaps
- variables
- accessibility
WAI SubSects
examples
- horizontal
- vertical
- tabbed (2)
- multi section
- printer style
links
- some hints
- faq&issues
- all features #
- about me
- our sitemap
- download
(C) 2004-04-22
Guido Draheim
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 | - |
| Lorem Ipsum | Overview | Examples |
|
Examples -Lorem Ipsum -Nietzsche Impressum sitemap |
Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |