In the article NAVT and Graphic Anchors, I explained how NAVT plug supported three anchor types that can be used on your web site. The graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors. In this article I’ll explain how NAVT creates a Graphic anchor and what you need to know about the required CSS.

Anatomy of a Graphic Anchor

Along with plain text links, graphic links are probably the most common anchors created for use on web sites. Graphics offer the most options for personalization and remain popular with web site designers. NAVT constructs these links by adding a user defined class to a DIV that wraps the anchor.

Below is an example of a Text Over Graphic anchor created by the NAVT plugin for a category that has the title World News.

The image above shows how the World News category is configured in NAVT. The text over graphic anchor type is selected and the user CSS class worldgraphic has been entered into the CSS class for graphic text box.

The NAVT output for this category configuration would appear as:

<ul class='menu example'>
<li class='erow example_item page_item world-news-cat categorytab'>
<div class='navt_tog worldgraphic'>
<a href='http://example.com/world-news' title='World News' class='navt_clink'>World News</a>
</div>
</li>
</ul>

To make the graphic appear behind the text World News you would create a CSS rule in your style sheet that adds a background to the DIV that contains the World News anchor. The DIV also contains the width and height of the graphic:

ul.example li.world-news div.worldgraphic {
background: transparent url(images/world-news-graphic.jpg) no-repeat left top;
width: 100px;
height: 20px;
}

Other Types

Each type of navigation item: pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above.