images on nav - css sprites

by tsimbalar

HTML

<div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Company Profile</a></li>
    <li>
      <a href="#" class="drop">Products</a>
      <ul>
        <li><a href="#">All Products</a></li>
        <li><a href="#">Products 1</a></li>
        <li><a href="#">Products 2</a></li>
        <li><a href="#">Products 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
          
    <li>
      <a href="#" class="drop">other subnav</a>
      <ul>
        <li><a href="#">All Products</a></li>
        <li><a href="#">Products 1</a></li>
        <li><a href="#">Products 2</a></li>
        <li><a href="#">Products 3</a></li>
        </ul>
    </li>
  </ul>      
</div>

CSS

li a{
    background-image:url('http://placehold.it/350x150/FF9999')
}

a.withChildren{  
    background-color:#F0F0F0;
    font-weight:bold;    
}

a.withChildren:hover{
    background-color:#C0C0C0;
    color:white;   
}

a span.navicon{display:none;} 

a.withChildren span.navicon{
    border-width:0px;
    width:16px;
    height:16px;
    background-image:url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/images/ui-icons_888888_256x240.png');
    display:inline-block;
            /*HACK : simulate inline-block in IE7*/
        zoom: 1;
        *display:inline;
        /* end of HACK*/
}

a.withChildren:hover span.navicon{
    background-position:-64px 0px;
}

JavaScript

$(document).ready(function(){
    //look for links that have subnavigation
    $("div").find("a").each(function(){
        var $this = $(this);
        if ($(this).next().is("ul")){
            $(this).addClass("withChildren").append("<span class='navicon'></span>");
        }   
    });
});