Text with Side Graphic Anchors

Introduction

In the article NAVT and Graphic Anchors, I explained how the NAVT plugin supported three anchor types that can be used on your web site. The new 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 the Text with Side Graphic anchors and what you need to know about the required CSS.

Anatomy of a Text Anchor with a Side Graphic

Perhaps you’ve seen them. This is a anchor that has a graphic positioned somewhere near it. The graphic can be above, to the right or left or below the anchor text. Often they are used to show a small teaser of a much larger graphic. The construction of these anchors separates the graphic from the anchor. By making the position of the anchor absolute, the anchor can generally be placed anywhere around the graphic.

The graphic used to provide the background image is obtained from a class that you provide from your stylesheet. You supply the name of the class at the time the link type is configured.
The graphic below shows the configuration of a category using text with side graphic. The Anchor type is set to Text with side graphic and the user CSS class worldgraphic has been entered into the text box.

The NAVT output for the navigation group would appear as:

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

Notice that the DIV is assigned the user defined class worldgraphic and contains only a non-breaking space as a place holder. The anchor appears outside of the DIV so it can be moved using absolute positioning relative to the LI parent container.

Here is a CSS example that would place the anchor to the right of the graphic:

li.world-news-cat { /* parent container must be relative */
position:relative;
}

ul li.world-news-cat div.worldgraphic { /* set size of background and image */
background: transparent url(images/world.jpg) no-repeat left top;
width: 100px;
height: 100px;
}

ul li.world-news-cat a { /* set for absolute positioning */
position: absolute;
top: 50%;
right: 0;
z-index: 50;
}

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.

Atalaya Studio