Animated Menus Using jQuery help needed

Question

I am designing a website for learning purposes and for some reason my navigation bar is sticking in the "hover" state for all tabs. The tutorial I am following is pretty in-depth but I have been over the code for a number of hours and i guess i just don't have enough knowledge to figure out the problem. While trouble shooting, I looked at the source code and copied it (from their example) and still have the same problem. Buttons are all 'always' in hove state, and therefore Java Script does not appear to do anything.

Tutorial: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

There are 3 images I have created for this (slightly different than the tutorial)

bkrd.png = a narrow image 400 px tall that repeats the background toolbar (no menu tabs) spritedown.png = sprite that shows normal button states (home & portfolio) 81 px tall
spriteover.png = sprite that shows button hover states. 81 px tall

my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animated Menu Demo</title>

<style>
body {
    background-color:#333333;
    margin:0;
}



/* Menu Body */
ul#menu {
    width:80%;
    height:400px;
    background:url(bkrd.png) repeat-x;
    list-style:none;
    margin:0;
    padding:0;
    padding-top:109px; /* distance from top where i need the sprite to start*/
    padding-left:20%;
}

/* Float LI Elements - horizontal display */
ul#menu li {
    float:left;
}

/* Link - common attributes */
ul#menu li a {
    background:url(spritedown.png) no-repeat scroll top left;
    display:block;
    height:81px;
    position:relative;
}

/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
    width:159px;
    background-position:0px 0px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
    width:157px;
    background-position:-159px 0px;
}

/* Span (on hover) - common attributes */
ul#menu li a span {
    background:url(spriteover.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:81px;
    width:100%;
    z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
    cursor:pointer;
}

/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
width:159px;
    background-position:0px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-159px 0px;
}
</style>

the script:

<!-- Include jQuery Library -->
<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
    // set opacity to nill on page load
    $("ul#menu span").css("opacity","0");
    // on mouse over
    $("ul#menu span").hover(function () {
        // animate opacity to full
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    },
    // on mouse out
    function () {
        // animate opacity to nill
        $(this).stop().animate({
            opacity: 0
        }, 'slow');
    });
});
</script>
</head>

the body:

<body>
<ul id="menu">
    <li><a href="#" class="home"><span></span></a></li>
    <li><a href="#" class="portfolio"><span></span></a></li>
</ul>
</body>

</html>

Answer 1

You havent turn on your jquery script the jsfiddle... Do you even have included your jquery.js in your head ? your jsfiddle with jquery on http://jsfiddle.net/7JxMF/1/

Animated Menus Using jQuery help needed

Question

1 answers

solution1
0 2013-01-19 00:42:54

Animated Menus Using jQuery help needed

Question

1 answers

solution1 0 2013-01-19 00:42:54

solution1
0 2013-01-19 00:42:54