3.7 Navigation Components
Of course a layout is never complete without a navigation. As navigational elements can become quite complex, these are managed in individual CSS files. The layout integrates them via the central stylesheet.
Within the YAML framework, several preformatted navigation components are available in the yaml/navigation/ folder.
- nav_slidingdoor.css — horizontal list navigation "Sliding Door II"
- nav_shinybuttons.css — horizontal list navigation " Shiny Buttons"
- nav_vlist.css — Vertical list navigation
All listed components support tab navigation. The use of these components -- in particular the structure of the source code and the classes and IDs -- is explained briefly here. And of course, you are not at all required to use these particular components in your YAML layout.
Sliding Door Navigation
The first is a tab navigation based on the Sliding Door (and Sliding Door II) at A-List-Apart.
This is a flat horizontal navigation with graphic hover effects for the individual list elements. The hovers only work on standard-conform browsers (Firefox, Safari, Opera, and IE 7). The hover effect is not supported by IE 5.x and IE 6.0.
The XHTML markup of both tab navigations is simple and identical. The menu items are represented as unordered lists. The active menu item is highlighted by replacing the link itself with the element strong. Additionally, the surrounding list element has the CSS class active and can be manipulated as desired.
An excerpt of source code to demonstrate the markup structure:
<div class="hlist" >
<ul>
<li class="active"><strong>Button 1</strong></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
</div>
Shiny Buttons Navigation
The Shiny Buttons navigation requires few graphical elements. It uses the very same XHTML markup as the Sliding Door Navigation, explained above. Switching between both design variants is easily accomplished by changing out the CSS component in the central stylesheet for the website.
The menu items are represented as unordered lists. The active menu item is highlighted by replacing the link itself with the element strong. Additionally, the surrounding list element has the CSS class active and can be manipulated as desired.
<div class="hlist" >
<ul>
<li class="active"><strong>Button 1</strong></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
</div>
Vertical List Navigation
This navigation is a vertical list, usable at either a fixed or a flexible width. Up to four hierarchy levels are possible as well as highlighting of the menu title, using a H6 heading with CSS class vlist right in front of the list.
The menu items are represented as unordered lists. The active menu item is highlighted by replacing the link itself with the element strong. Additionally, the surrounding list element has the CSS class active and can be manipulated as desired.
Subtitles can be easily integrated for the submenus by using the span element. In addition, each menu item incorporates a hover effect on mouseovers.
The file nav_vlist.css from the yaml/navigation/ folder provides the functionality for this component. The corresponding (X)HTML markup is as follows:
<h6 class="vlist">Title</h6>
<ul class="vlist">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><span>Ebene 3</span>
<ul>
<li><a href="#">Button 3.1</a></li>
<li class="active"><strong>Button 3.2</strong></li>
<li><a href="#">Button 3.3</a></li>
</ul>
</li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
examples/05_navigation/menu_vertical_listnav.html
Adjustments for Internet Explorer
When using this navigation component, you must import the file patch_nav_vlist.css from the yaml/patches/ folder into the corresponding IE adjustment stylesheet:
/* Layout-Independent Adjustments -------------------------*/
@import url(/yaml/core/iehacks.css);
@import url(/yaml/patches/patch_nav_vlist.css); /* Box Model Corrections */
/* Layout-Dependent Adjustments ---------------------------*/
@media screen
{
...
}
As the box model is particularly fault in Internet Explorer 5.x (see Section 2.4), this browser requires special adjustments for this navigation.
...
/* level 1 */
* html .vlist li a,
* html .vlist li strong,
* html .vlist li span { width: 100%; w\idth: 90%; }
/* level 2 */
* html .vlist li ul li a,
* html .vlist li ul li strong,
* html .vlist li ul li span { width: 100%; w\idth: 80%; }
...
This code sets the width of the list elements to 100 percent for IE 5.x / Windows, correcting for the faulty box model interpretation.
