Global Moxie

Question

How do I create graphical navigation bars with rollovers?

Answer

Big Medium's <%navigation%> and <%subnavigation%> widgets generate text-based navigation. However, with some custom styles, you can convert the navigation bars into image rollovers.

This example will show how to create a horizontal navigation bar for the site's main sections. Specifically, we'll make a graphical navigation bar for this widget tag:

<%navigation direction="horizontal"%>

Create the navigation graphics

Create a default graphic and a rollover graphic for each section.

Create two images for each of the sections in your navigation: One is the default navigation graphic for the section, and the other is the rollover graphic to be displayed when the mouse hovers over the section link. The two graphics should have identical height and width.

For horizontal navigation, make all section graphics the same height (individual sections can vary in width if you like). For vertical navigation, make all graphics the same width.

To keep things tidy, use a consistent naming convention for your navigation graphics, using each section's slug name as an identifier. For sections with the slug names "news" and "sports," for example, you might name your image files like so:

• hnav-news.gif
• hroll-news.gif
• hnav-sports.gif
• hroll-sports.gif

Upload the navigation graphics

Upload the graphics to your server via FTP. For this example, we'll assume that the graphics have been uploaded to a directory located here:

http://www.example.com/navpix

Turn off navigation styles

To avoid headaches, turn off Big Medium's built-in styles for horizontal navigation. Go to "Settings>HTML Preferences" and in the "Navigation" panel, click the "Go there now" link.

In the "Widget: navigation" panel, change the "Horizontal Style" field to "None: Unstyled List." Change the "Main Navigation Depth" field to "Main Sections Only," and click Save.

Big Medium's navigation markup

Under the hood, the navigation widgets use <ul> and <li> list tags to generate the navigation bars. Here's some example HTML generated by our horizontal navigation tag:

<div class="bmw_navigation bmn_hnav">
    <ul>
        <li class="bmn_sec-news">
          <a href="http://www.example.com/news/index.shtml">News</a>
        </li>
        <li class="bmn_sec-biz">
          <a href="http://www.example.com/biz/index.shtml">Business</a>
        </li>
        <li class="bmn_sec-sports">
          <a href="http://www.example.com/sports/index.shtml">Sports</a>
        </li>
        <li class="bmn_sec-arts">
          <a href="http://www.example.com/arts/index.shtml">Arts
            &amp; Entertainment</a>
        </li>
        <li class="bmn_sec-living">
          <a href="http://www.example.com/living/index.shtml">Living</a>
        </li>
        <li class="bmn_sec-opinion">
          <a href="http://www.example.com/opinion/index.shtml">Opinion</a>
        </li>
    </ul>
    <span class="bmn_clearNav"> </span>
</div>

Without any custom styles, the navigation would look like this:

• News
• Business
• Sports
• Arts & Entertainment
• Living
• Opinion

But with a dash of CSS pixie dust, we'll turn that plain list into graphic navigation.

Create the custom navigation styles

To make our custom styles specific to horizontal navigation for main sections and leave other navigation alone, we'll apply the CSS declarations to div.bmn_hnav.¹

First, some foundation styles. These styles will chunk our HTML list into a horizontal set of 80x20 blocks and hide the text of the section names.

/* set default height/width of navigation images --------------- */
div.bmn_hnav li { width: 80px }
div.bmn_hnav a { height: 20px }

/* general layout styles for image navigation ------------------ */
div.bmn_hnav li {
    display: block;
    float:left;
    background-repeat: no-repeat;
}
div.bmn_hnav a {
    display: block;
    font-size: 1px;
    text-indent: -999999em;
    overflow: hidden;
    background-repeat: no-repeat;
}
div.bmn_hnav ul li a:hover,
div.bmn_hnav ul li.bmn_active a {
    background-image: none;
}
div.bmn_hnav span.bmn_clearNav {
    height:0px;
    font-size:0px;
    display:block;
    width: 0px;
    overflow:hidden;
    clear:left;
}

Now we're ready to specify which graphics should be used for each section's navigation link. These links are located inside <li> list item tags, each with a unique class based on each section's slug name. For example, the "news" section has the class name "bmn_sec-news," and the "sports" section has the class name "bmn_sec-sports." Our entries for these sections look like so:

/* set section-specific images --------------------------------- */
/* news */
div.bmn_hnav li.bmn_sec-news a {         /* default image */
    background-image: url(http://www.example.com/navpix/hnav-news.gif);
}
div.bmn_hnav li.bmn_sec-news {           /* rollover image */
    background-image: url(http://www.example.com/navpix/hroll-news.gif);
}

/* sports */
div.bmn_hnav li.bmn_sec-sports a {       /* default image */
    background-image: url(http://www.example.com/navpix/hnav-sports.gif);
}
div.bmn_hnav li.bmn_sec-sports {         /* rollover image */
    background-image: url(http://www.example.com/navpix/hroll-sports.gif);
}

Repeat for all of your sections in the navigation.

Create the custom navigation styles

But what if our section graphics are not all the same size? The first chunk of CSS above (the one with our foundation styles) specifies a default width of 80 pixels. But this won't look so hot if the graphics for individual sectiosn are larger or smaller.

We can address this by setting a custom size in the style for the section's rollover image, like so:

/* set section-specific images --------------------------------- */
/* news: custom width of 55 pixels */
div.bmn_hnav li.bmn_sec-news a {         /* default image */
    background-image: url(http://www.example.com/navpix/hnav-news.gif);
}
div.bmn_hnav li.bmn_sec-news {           /* rollover image */
    width:55px;
    background-image: url(http://www.example.com/navpix/hroll-news.gif);
}

/* sports: custom width of 70 pixels */
div.bmn_hnav li.bmn_sec-sports a {       /* default image */
    background-image: url(http://www.example.com/navpix/hnav-sports.gif);
}
div.bmn_hnav li.bmn_sec-sports {         /* rollover image */
    width:70px;
    background-image: url(http://www.example.com/navpix/hroll-sports.gif);
}

The final CSS

With our custom graphics and widths, the final CSS looks like this:

/* set default height/width of navigation images --------------- */
div.bmn_hnav li { width: 80px }
div.bmn_hnav a { height: 20px }

/* general layout styles for image navigation ------------------ */
div.bmn_hnav li {
    display: block;
    float:left;
    background-repeat: no-repeat;
}
div.bmn_hnav a {
    display: block;
    font-size: 1px;
    text-indent: -999999em;
    overflow: hidden;
    background-repeat: no-repeat;
}
div.bmn_hnav ul li a:hover,
div.bmn_hnav ul li.bmn_active a {
    background-image: none;
}
div.bmn_hnav span.bmn_clearNav {
    height:0px;
    font-size:0px;
    display:block;
    width: 0px;
    overflow:hidden;
    clear:left;
}

/* set section-specific images --------------------------------- */
/* news: custom width of 55 pixels */
div.bmn_hnav li.bmn_sec-news a {         /* default image */
    background-image: url(http://www.example.com/navpix/hnav-news.gif);
}
div.bmn_hnav li.bmn_sec-news {           /* rollover image */
    width:55px;
    background-image: url(http://www.example.com/navpix/hroll-news.gif);
}

/* sports: custom width of 70 pixels */
div.bmn_hnav li.bmn_sec-sports a {       /* default image */
    background-image: url(http://www.example.com/navpix/hnav-sports.gif);
}
div.bmn_hnav li.bmn_sec-sports {         /* rollover image */
    width:70px;
    background-image: url(http://www.example.com/navpix/hroll-sports.gif);
}

Add the styles to the theme style sheet

In the Big Medium control panel, click "Layout>Edit Theme Style Sheet." Add these custom styles to the style sheet, and save.

You're done!

After making these changes, your navigation will now display as image rollovers.