Knowledge Base

HOW TO: Use images in navigation menu items


The default theme supplied with eTrader uses a combination of images and text to create the navigation menu items. An image is used to create the left and right hand edges of the menu item with rounded upper corners. A text label is overlayed on the graphical background whose size determines the width of the menu item.

This technique has several important advantages, namely:

    - the page is light (very few images to download)
    - the page can be translated automatically if the user selects a different language
    - horizontal space is used economically as the menu items dynamically size to the width of the label

Sometimes however, your site may be in a single language and the effect you will get using an image outweighs the performance issue.

In that case, use the following CSS technique to link three images with each menu item; one for its normal state, or for when it is selected, and one mouse rollover effects.

In the stylesheet Menu.css in the active theme, create the following selectors:

.AspNet-Menu-Horizontal ul>li:first-child
{
    background: transparent url(Images/Tabs/Home.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li
{
    background: transparent url(Images/Tabs/Catalogue.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li+li
{
    background: transparent url(Images/Tabs/Events.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li+li+li
{
    background: transparent url(Images/Tabs/Contact.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child:hover
{
    background: transparent url(Images/Tabs/HomeHL.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li:hover
{
    background: transparent url(Images/Tabs/CatalogueHL.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li+li:hover
{
    background: transparent url(Images/Tabs/EventsHL.gif) no-repeat;
}

.AspNet-Menu-Horizontal ul>li:first-child+li+li+li:hover
{
    background: transparent url(Images/Tabs/ContactHL.gif) no-repeat;
}

Substitute the filenames above for those you want to use, and there you have it.



 |  View Topic History  |