THDL Toolbox > Developers' Zone > Web-Development > Creating Secondary Navigation Links In Thdl Pages
Creating Secondary Navigation Links In Thdl Pages
Contributor(s): David Germano, Nathaniel Grove.
The secondary navigation buttons for THDL are done through CSS (Cascading Style Sheet) styles using a single jpeg image and element classes. There are two possible types of buttons: a disabled button (blue with white text) that does not change state and an active button (silver with blue text) that changes appearance (black with white text) when the cursor “rolls over” it. The image and the CSS styles are already up on the site. All that one has to do is to create the mark up to access the mechanism. This can be donw in either HTML or XML. Creating the Buttons in HTML
The key to the HTML mark up are the class attributes given to the elements that form the buttons. The primary elements used in creating the appearance of buttons are a link tag (<a>) and an enclosing <div> element. These are enclosed within a table to effect the appropriate space, and the table itself is enclosed within a <div> element whose id is set to “secondary-navitation”. This latter element places the table containing the buttons at the appropriate distance down on the page to fall underneath the THDL banner.
Each cell in the table conatains a <div> element. The div element can have one of two classes: disabled or outer. <div class="disabled"> creates a disabled button with white text and a blue background. <div class="outer"> creates the active button with blue text and silver background that changes to white text on a black background upon rollover. The class of these divs is called outer because they contain an inner link element (<a>), which has a class equal to "button". The <a> element also contains the href attribute that functions as the link.
Here is an example of the secondary markup:
<div id="secondary-navigation">
<table styleborder="0" cellpadding="3" width="700">
<tbody>
<tr>
<td>
<div class="disabled"> Home</div>
</td>
<td>
<div class="outer"><a class="button" href="http://www…">1st Link Text</a></div>
</td>
<td>
<div class="outer"><a class="button" href=" 
http://www…">2nd link text</a></div>
</td>
<td>
<div class="outer"><a class="button" href=" http://www…">3rd link text</a></div>
</td>
<td>
<div class="outer"><a class="button" href=" http://www…">4th link text</a></div>
</td>
<td>
<div class="outer"><a class="button" href=" http://www…">5th link text</a></div>
</td>
<td>
<div class="outer"><a class="button" href=" http://www…">6th link text</a></div>
</td>
</tr>
</tbody>
</table>
</div>
Creating Buttons in XML
To create the buttons in THDL XML essay one has to include in the header of the document a <bibl> with n attribute set to “nav2”. This <bibl> then should contain a series of <xref> elements whose n attribute contains the link URL, if it represents an active button, and its content represents the text of the link. This is converted into the HTML described above by the essay.xsl XSLT stylesheet. If the n attribute of a <xref> is left blank, it creates a disabled button. An example is:
<bibl n="links">
<xref n="" type="url">Home (This page)</xref>
<xref n="http://…" type="url">1st Link</xref>
<xref n="http://…" type="url">2nd Link</xref>
<xref n="http://…" type="url">3rd Link</xref>
<xref n="http://…" type="url">4th Link</xref>
</bibl>
The stylesheets convert this into the HTML markup described above.
How the CSS Works
There are two parts to the mechanism for the creation of the buttons. An single image that contains the three different versions of the button in a vertical column and CSS instructions that display different parts of the image depending on the class or state of the element in question. The button image is located at http://www.thdl.org/images/nav2buttons.gif
The Image for Secondary Navigation Links
The different element classes are associated with specific CSS styles that display only one part of this image. The class “outer” displays the black button with white text. The class “button” displays the silver button with blue text. In the HTML markup active buttons have a <div class="outer"> surrounding an <a class="button">. The <div class="outer"> has the background image of the black button, while the <a class="button"> has the background image of the silver button which in the normal state overrides the <div> background, or the black button. When one mouses over such an active button, the CSS stylesheets set the <a class="button"> background to transparent, which allows the black button to show through. At the same time, the color of the text is changed from blue to white. This creates the effect of the changing buttons. Finally, a <div class="disabled"> simply sets the background to the bottom blue button and sets the text to white.
The CSS styles are included at the bottom of the http://www.thdl.org/style/thdl-advanced.css, which are included in the http://www.thdl.org/style/thdl-styles.css. The actual CSS code looks like this:
/* 2nd navigation button styles */
div.outer { display: block; background-color: transparent; background: url(../images/nav2buttons.gif) 0 -25px no-repeat; width: 100px; height: 23px; } div.disabled { display: block; background-color: transparent; background: url(../images/nav2buttons.gif) 0 -49px no-repeat; width: 100px; height: 23px; text-align: center; padding: 1px; color: #ffffff; font-size: 100%; font-weight: bold; text-decoration: none; } div.outer a.button { display: block; background-color: transparent; background: url(../images/nav2buttons.gif) 0 0 no-repeat; width: 100%; height: 100%; text-align: center; padding: 1px; font-size: 100%; font-weight: bold; text-decoration: none; width: 100%; height: 100%; text-align: center; overflow: hidden; } a.button:link, a.button:visited { color: #006699!important; } div.outer a.button:hover, a.button:active { background-image: none; color: #ffffff!important; }