Global Moxie

Help!

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Moxiemail

Enter your e-mail to receive occasional updates:

News feeds

Home > Help! > Big Medium FAQ > Design > Styles

How do I create graphical navigation bars with rollovers?

E-mail this page

Print this page

Important: Sales, service, and support of Big Medium are no longer offered. More details.

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.

1. If we were applying the styles to vertical navigation, we would use div.bmn_vnav. For the <%subnavigation%> widget, it would be div.bmn_hsubnav or div.bmn_vsubnav. [Go back]

More from this section

Home > Help! > Big Medium FAQ > Design > Styles

How do I add my own custom CSS styles?
Big Medium gives you complete control over the CSS styles of your site.

How do I create graphical navigation bars with rollovers?
With some custom CSS, you can convert Big Medium's text-based navigation into image rollovers.

How do I get rid of Big Medium's built-in CSS navigation styles?
How to turn off navigation styles in Big Medium's HTML preferences.

How can I display link lists horizontally or in columns?
Big Medium's link widgets display links in a vertical list by default. With a little CSS, you can display them in columns instead.