JQuery Navigation Menu using hover+click on image-sprites

Question

I'm in the process of building a navigation toolbar for a site and struggling to make the hover+click work. I have been searching for days and rebuilding several times using methods from live sites and tutorials and I just cant solve this simple problem.

Issue: I have a navigation toolbar sprite image with three states, passive, hover and active. I have the classes set up for all three states but can only get the hover state to correctly appear with jquery.

What I want to do: When the cursor hovers over the text, I want it to animate the opacity for the hover section of the sprite running under a tag (which works and fades in and out perfectly). Next I want to animate the opacity for the active section of the sprite so it also fades in from the hover sprite to active sprite. The website will also be single page navigation so I need the active button to go back to the passive sprite when another button is clicked.

Here's what I have so far:

CSS:
ul#navMenu {
width:1020px;
height: 110px;
list-style:none;
margin:250px auto;
}

ul#navMenu li {
float:left;
}



ul#navMenu li a {
background: url(menu-sprite.png) no-repeat scroll top left;
display: block; 
height: 110px;
text-indent: -9999px;
position:relative;

}


ul#navMenu li a.gallery {
    width: 230px; 
    background-position: 0 0;

}

ul#navMenu li a.wip {
    width: 229px; 
    background-position: -230px 0;  
}

ul#navMenu li a.home {
    width: 103px; 
    background-position: -459px 0;  
}

ul#navMenu li a.scripts {
    width: 229px; 
    background-position: -562px 0;  
}

ul#navMenu li a.contact {
    width: 229px; 
    background-position: -791px 0;  
}

ul#navMenu li a span {
background: url(menu-sprite.png) no-repeat scroll bottom left;
display: block;
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
z-index:75;
}
ul#navMenu li a span:hover {
    cursor:pointer;
}   
    ul#navMenu li a.gallery span{
        background-position: 0 -110px;
    }

    ul#navMenu li a.wip span{
        background-position: -230px -110px; 
    }

    ul#navMenu li a.home span{
        background-position: -459px -110px; 
    }

    ul#navMenu li a.scripts span{
        background-position: -562px -110px; 
    }

    ul#navMenu li a.contact span{
        background-position: -791px -110px; 
    }

ul#navMenu li a :active span {
background: url(menu-sprite.png) no-repeat scroll bottom left;
display: block;
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
z-index:100;
}       
        ul#navMenu li a span:active {
            cursor:pointer;
        }   

        ul#navMenu li a .gallery:active span {
            background-position: 0 -220px;  
        }

        ul#navMenu li a .wip:active span {
            background-position: -230px -220px; 
        }

        ul#navMenu li a .home:active span {
            background-position: -459px -220px; 
        }

        ul#navMenu li a .scripts:active span {
            background-position: -562px -220px; 
        }

        ul#navMenu li a .contact:active span {
            background-position: -791px -220px; 
        }

...

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NavMenu Test</title>

<link rel="stylesheet" href="styles.css" />

 <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(function() {
    // set opacity to nill on page load
    $("ul#navMenu span").css("opacity","0");
    // on mouse over
    $("ul#navMenu span").mouseover (function () {
        // animate opacity to full
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    });
    // on mouse out
    $("ul#navMenu span").mouseout (function () {
        // animate opacity to nill
        $(this).stop().animate({
            opacity: 0
        }, 'slow');
    });
    // on mouse click
    $("ul#navMenu :active span").click(function () {
        // animate opacity to full
        $(this).unbind('mouseover'),
        $(this).unbind('mouseout'),
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    });
});
</script>

</head>

<body>

<ul id="navMenu">
<li><a href="#" class="gallery"><span style="opacity: 0;"></span></a></li>
<li><a href="#" class="wip"><span style="opacity: 0;"></span></a></li>
<li><a href="#" class="home"><span style="opacity: 0;"></span></a></li>
<li><a href="#" class="scripts"><span style="opacity: 0;"></span></a></li>
<li><a href="#" class="contact"><span style="opacity: 0;"></span></a></li>
</ul>


</body>
</html>

The functionality I'm going for can be found here: http://pixelpimps.net/#!/home

I'm trying to accomplish the same functionality (hover over animation, click animation, click switching animation) except with an image sprite.

Thanks in advance and please ask if you need anything else.

score 0 · Answer 1 · answered Jan 13 '13 at 21:45

0

I believe that it's done using flash on that site.

You could try having an image an image inside each span, who's src chances on hover. Then have the src's be gif images with more than one frame. I'm working on some code to do this now. I'll edit this and post the code in a few hours. Don't be afraid to try and use this idea in your own way either, I'm no expert.

answered Jan 13 '13 at 21:45

KFox

1,166
3
10
35

Thanks for that suggestion, I considered working with a passive/active state sprite to achieve that effect but could not figure out where to start. I forgot to mention that I literally got into web development yesterday and I'm new to pretty much everything I'm doing on the CSS and jQuery side. I'm working on my portfolio site and I'm going for a specific style that templates unfortunately cant reproduce. I'll definitely try to see how far I can get with this before you have it figured out, thanks again. – BAH Jan 13 '13 at 23:33
Here's an update with how far I've gotten so far, the code has changed a bit but I'm fairly sure I'm going down the wrong path. I have it running here: [http://jsfiddle.net/8PaU2/](http://jsfiddle.net/8PaU2/) – BAH Jan 13 '13 at 23:51
So the problem you're having is just with the active part? – KFox Jan 14 '13 at 12:41
Looking at that, you could set a variable whenever one is clicked. Then have some sort of function to change the sprite and use `setInterval` for about ten or fifteen times a second, that should look okay. I'll keep working on that other solution though. – KFox Jan 14 '13 at 12:47
Thanks for all the help KFox but it's working as of this morning. I was able to get a friend to figure out what was missing. The span was replaced with the appropriate .hover and .active sections. The only change to the jquery was to .removeclass (hover) and .addclass (active) on click and then .removeclass (active) and .addclass (hover) to set it as active. I appreciate all your help, thanks again – BAH Jan 14 '13 at 15:42
Cool, I'd love to see this site in action. What's it for? – KFox Jan 14 '13 at 22:24
It's going to be my portfolio site (mostly CG work), it's still a few weeks away from being ready and I have yet to decide on a host. – BAH Jan 15 '13 at 02:24

JQuery Navigation Menu using hover+click on image-sprites

1 Answers1