Flipping Menu, Vertikal dan Horizontal

Flipping Menu

Tadi kita sudah lihat Widget Popular Post Warna-warni, Vertikal dan Horizontal, sekarang yang tidak kalah kerennya Flipping Menu, Vertikal dan Horizontal.

Tanpa harus berbasa-basi lagi karena masih ada satu tutorial lagi yang harus diposting, berikut kode HTML, CSS dan Javascript.

1. HTML

<b>Horizontal Menu</b>
    <ul id="hor">
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="download">Download</a></li>
        <li><a href="#" class="contact">Contact</a></li>


    </ul>


    <div class="clear"></div>
    <br/><br/>

    <b>Vertical Menu</b>
    <ul id="ver">
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="download">Download</a></li>
        <li><a href="#" class="contact">Contact</a></li>
    </ul>

2. CSS

/* CSS Style for Horizontal Menu */    
#hor {
    list-style:none;
    padding:0;
    margin:0;    
}
    #hor li {
        float:left;
        padding:5px;
    }
    #hor a {
        display:block;
        height: 12px;
        text-indent:-999em;
    }
    #hor a.home {
        width:46px; 
        background:url(vHome.gif) no-repeat 0 0;    
    }
    #hor a.download {
        width:94px; 
        background:url(vDownload.gif) no-repeat 0 0;    
    }
#hor a.contact {
        width:74px; 
        background:url(vContact.gif) no-repeat 0 0;    
    }

/* CSS Style for Vertical Menu */    
#ver {
    list-style:none;
    padding:0;
    margin:0;    
}
    #ver li {
        padding:2px;    
    }
    #ver li a {
        display:block;
        height:12px;
        text-indent:-999em;
    }            
    #ver a.home {
        width:47px; 
        background:url(hHome.gif) no-repeat 0 0;    
    }
   #ver a.download {
        width:95px; 
        background:url(hDownload.gif) no-repeat 0 0;    
    }
    #ver a.contact {
        width:74px; 
        background:url(hContact.gif) no-repeat 0 0;    
    }
.clear {
        clear:both;    
    }    

3. JAVASCRIPT

$(document).ready(function () {
    /* Horizontal Menu */
    $('#hor li a').hover(
        function () {
            //convert current height to negative value
            height = $(this).height() * (-1);
            $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200});    
        }, 
        function () {
            //reset the top position
            $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});    
        }
    );
    /* Vertical Menu*/
    $('#ver li a').hover(
        function () {
            //convert current width to negative value
            width = $(this).width() * (-1);
            $(this).stop().animate({'backgroundPosition':'(' + width + ' 0)'}, {duration:200});    
        }, 
        function () {
            //reset the left position
            $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});    
        }
    );
});

Demo

Sumber:

http://www.queness.com