Меню на спрайтах CSS и jQuery

Сделаем меню на спрайтах используя CSS, и jQuery для эффектной смены спрайтов.

HTML

<div id="wrapper">
    <ul id="menu">
        <li class="home"><a class="selected" href="#">Главная<span></span></a></li>
        <li class="about"><a href="#">О нас<span></span></a></li>
        <li class="contact"><a href="#">Контакты<span></span></a></li>
    </ul>
    <div class="content">
        <p>
        Контент
        </p>
    </div>
</div>

CSS

#wrapper{width:700px; margin:30px auto; overflow:hidden;}
    .content{background:#FFF; clear:both; display:block; -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius:5px;}
    
    p{font-family:arial, sans-serif; padding:20px 30px 20px 30px; margin:0; font-size:14px; color:#212121; line-height:1.6em;}
        p a{color:#A90000;}
    
/* Everything CSS Sprite Menu */
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
    #menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
        #menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;position:relative;}
        #menu li span{
        
        display:block;
        position:absolute;
        
        top:0px;
        left:0px;
        
        height:100%;
        width:100%;
        z-index:100;
        }
        
        /* Home Button */
        #menu li.home{width:115px; height:60px;}
            #menu li.home a{background-position:-5px -5px;}
            #menu li.home a span{background:url('images/menu-sprite.jpg') no-repeat; width:115px; height:60px; display:block;background-position:-5px -75px;}
            #menu li.home a.selected{background-position:-5px -145px;}
        
        /* About Button */
        #menu li.about{width:120px; height:60px;}
            #menu li.about a{background-position:-125px -5px;}
            #menu li.about a span{background:url('images/menu-sprite.jpg') no-repeat; width:120px; height:60px; display:block;background-position:-125px -75px;}
            #menu li.about a.selected{background-position:-125px -145px;}
            
        /* Contact Button */
        #menu li.contact{width:160px; height:60px;}
            #menu li.contact a{background-position:-250px -5px;}
            #menu li.contact a span{background:url('images/menu-sprite.jpg') no-repeat; width:160px; height:60px; display:block;background-position:-250px -75px;}
            #menu li.contact a.selected{background-position:-250px -145px;}

JS

Подключаем библиотеку jQuery и вызываем скрипт для анимации меню:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- Let's do the animation -->
<script type="text/jаvascript">
    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            if(!$(this).parent().hasClass("selected")){
                // animate opacity to full
                $(this).stop().animate({
                    opacity: 1
                }, 'fast');
            }
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, 'slow');
        });
    });
</script>