Animated Menus Using jQuery

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

demo: http://www.shopdev.co.uk/blog/menuDemo.html

  <head>
    <style type=”text/css”>
/*<![CDATA[*/
        body {
                background-color:#333333;
                margin:0;
        }
        /* Firefox Dotted Outline Fix */
        a:active {
                outline: none;
        }
        /* Firefox Dotted Outline Fix */
        a:focus {
                -moz-outline-style: none;
        }
        /* Menu Body */
        ul#menu {
                width:80%;
                height:102px;
                background:url(bg.png) repeat-x;
                list-style:none;
                margin:0;
                padding:0;
                padding-top:20px;
                padding-left:20%;
        }
        /* Float LI Elements – horizontal display */
        ul#menu li {
                float:left;
        }
        /* Link – common attributes */
        ul#menu li a {
                background:url(sprite.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;
        }
        /* 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(sprite.png) no-repeat scroll bottom left;
                display:block;
                position:absolute;
                top:0;
                left:0;
                height:100%;
                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 {
                background-position:0px -81px;
        }
        /* Shift background position on hover for the class: “portfolio” */
        ul#menu li a.portfolio span {
                background-position:-159px -81px;
        }
    /*]]>*/
    </style><!– Include jQuery Library –>
    <script src=”jquery-1.2.2.pack.js” type=”text/javascript”>
</script>
    <!– Let’s do the animation –>
    <script type=”text/javascript”>
//<![CDATA[
        $(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>
  <body>
    <ul id=”menu”>
      <li>
        <a href=”#”></a>
      </li>
      <li>
        <a href=”#”></a>
      </li>
    </ul>
  </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s