How do I use sprites and CSS rollovers as links in list items for navigation?

HTML & CSS
1

Hello,

I’m trying to create a navigation menu bar using rollover images (sprites) and unordered lists. The client has very specific design requirements and has chosen a “brand” font that I can’t slide into the implementation (even without such methods as typekit) as text, so I need to use images as text for this menu.

The menu is built as an unordered list and each list item contains a main link, but hovering each list item will produce a submenu, built inside a span which resides inside the list item.

If I give the list item a background image (using sprites to generate a rollover effect) the items show up, but of course the anchor tag has no value, so I can’t “link” anywhere. Giving the anchor tag some value results in the menu being completely screwed up. If I give the anchor tags the background image instead, the item simply doesn’t show up, although the same tactic (an empty anchor tag that has a background image as a sprite) is employed elsewhere on the page and it works just fine. I suspect my problem is because the anchor contains no “content”, so it doesn’t get displayed. How can I fool the list item into thinking the anchor has actual content so it gets displayed AND the links work? I’ve tried using blank spaces as the content of the anchor to no avail.

I suppose the easy answer is to use text links instead of images, but creating images for the client’s links are the only option. Is this a case where I should use a Javascript image rollover for the anchors and abandon the CSS sprite solution? I was trying to avoid the use of Javascript on rollovers if possible. Is a z-index a possible soltion using a completely transparent .png as the anchor’s value? Perhaps I’m overthinking it. :slight_smile:

The test page is here: http://test.blackcypresscapital.com/
Notice that “MAIN” and “CYPRESS LOG” should be active links, but with no value in the anchor tags, it makes sense that there is nowhere to go when clicking those items. Any advice is appreciated. Thanks. HTML and CSS as follows:

<ul id="topNav">
        <li class="nav" id="mainMenu"><a <?php echo "href=\\"" . $homePage . "\\"" ?> name="Black Cypress Capital Home" target="_self" title="Black Cypress Capital Home"></a>
        <span>
          <a <?php echo "href=\\"" . $homePage . "/principles.php\\"" ?> ><img src="images/nav/principlesHover.png"></a>
          <a <?php echo "href=\\"" . $homePage . "/process.php\\"" ?> ><img src="images/nav/processHover.png"></a>
          <a <?php echo "href=\\"" . $homePage . "/products.php\\"" ?> ><img src="images/nav/productsHover.png"></a>
        </span>
        </li>
...

div#leftSide li.nav#mainMenu
{
  background: url(../images/nav/main.png);
  width: 65px;
  height: 34px;
}
div#leftSide li.nav#mainMenu:hover
{
  background-position: -65px 0;
}
div#leftSide li.nav
{
  display: inline;
  list-style: none;
}
div#leftSide ul#topNav
{
  list-style: none;
  position: relative;
}
div#leftSide ul#topNav li
{
  float: left;
}
div#leftSide ul#topNav li a
{
  display: inline;
  text-decoration: none;
}
ul#topNav li span
{
	float: left;
	margin: 2px 0 0 0;
	background: #252016;
	position: absolute;
	left: -5px; top: -37px;
	display: none;
	color: #726444;
}
ul#topNav li:hover span { display: inline; }
ul#topNav li span a { display: inline; }
2

Update:

I solved the original problem by making the top-level anchor tags display:block and with some dimensions.

The new problem is how do I maintain the rollover effect on “MAIN” once I move the mouse into the submenu? Just wanted to post in case anyone was wasting time on a solution to the original problem.

3

Problem with submenu hovering turning “off” the MAIN rollover has been solved. If anyone is curious on how this all works, please let me know. I apologize if this is elementary for most, but if anyone needs tips on this sort of implementation, feel free to contact me.

4

Sorry I missed all three of your posts but you solved them pretty quickly anyway :slight_smile:

To maintain the parent in a hover state you would effect the change on the hover of the list element and not the anchor and then reset it on the nested element if different (which it seems you have done anyway :)).

The following code is not best for accessibility reasons.


<li class="nav"><a href="[http://test.blackcypresscapital.com](http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/)" id="mainMenu" name="Black Cypress Capital Home" target="_self" title="Black Cypress Capital Home"></a>
        <span>
          <a href="[http://test.blackcypresscapital.com/principles.php" ><img src="[URL="http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/images/nav/principlesHover.png"]images/nav/principlesHover.png](http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/principles.php)"></a>
          <a href="[http://test.blackcypresscapital.com/process.php" ><img src="[URL="http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/images/nav/processHover.png"]images/nav/processHover.png](http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/process.php)"></a>
          <a href="[http://test.blackcypresscapital.com/products.php" ><img src="[URL="http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/images/nav/productsHover.png"]images/nav/productsHover.png](http://www.sitepoint.com/forums/css-53/view-source:http://test.blackcypresscapital.com/products.php)"></a>
        </span>
        </li>

You have three bare anchors running in together which means a screen reader would read them out as a sentence and not pause between. You also have image links without alt attributes which means those with images disabled get nothing.

The accepted way to style those elements would be by using a nested list and enclosing the anchors in lists also.

e.g.


<ul id="topNav">
    <li class="nav"><a href="http://test.blackcypresscapital.com" id="mainMenu" name="Black Cypress Capital Home" target="_self" title="Black Cypress Capital Home"></a>
        <ul>
            <li><a href="http://test.blackcypresscapital.com/principles.php"  ><img src="images/nav/principlesHover.png" alt="principles"></a></li>
            <li><a href="http://test.blackcypresscapital.com/process.php" ><img src="images/nav/processHover.png" alt="process" ></a></li>
            <li><a href="http://test.blackcypresscapital.com/products.php" ><img src="images/nav/productsHover.png" alt="products"></a></li>
        </ul>
    </li>
</ul>

It’s more code but its always about semantic structure.:slight_smile:

I would have probably put the images in the background and used a gilder/levin image replacement method which would allow you to do an easy rollover on the links also.

5

Thank you for such a good response. I appreciate the tips on accessibility and will implement those soon.

As far as the image replacement is concerned, the Glider/Levin method looks like it will not work for transparent images, which is what I need to use here. Perhaps some of the other methods will work, but the menu rollovers are functioning fine at this point.

Thanks again for such a prompt, rich response. I love sitepoint. :slight_smile:

6

Ah ok :slight_smile: Yes you are correct and unfortunately it won’t work for transparent images so it won’t be of much to use to you.