How to apply Apple iphone as effect to the menu list?

advertisements

I am trying to do menu like Apple menu for that i have used greensock api

Here is what i tried JSFIDDLE

Update

This is what i want to achive :

Fiddle

Why it it is flickering.......when hover....?

      <div class="demoWrapper">
        <div class="stage">
            <div id="container" style="margin-left:225px;">
                <div id="box0" class="to_box" style="/*top: 90px;*/">test 0</div>
                <div id="box1" class="to_box" style="/*top: 115px*/">test 1</div>
                <div id="box2" class="to_box" style="/*top: 140px;*/">test 2</div>
                <div id="box3" class="to_box" style="/*top: 165px;*/">test 3</div>
                <div id="box4" class="to_box" style="/*top:190px;*/">test 4</div>
                <div id="box5" class="to_box" style="/*top:215px*/">test 5</div>
                <div id="box6" class="to_box" style="/*top:240px*/">test 6</div>
                <div id="box7" class="to_box" style="/*top:265px*/" >test 7</div>
                <div id="box8" class="to_box" style="/*top:290px*/">test 8</div>
                <div id="box9" class="to_box" style="/*top:315px*/">test 9</div>
                <div id="box10" class="to_box" style="/*top:340px*/">test 10</div>
                <div id="box11" class="to_box" style="/*top: 365px;*/">test 11</div>
                <div id="box12" class="to_box" style="/*top: 390px;*/">test 12</div>
            </div>
        </div>
    </div>


Try this :)

<!DOCTYPE html>
<html>
    <head>
         <script src="js/libs/jquery.min.js"></script> <!-- DOWNLOAD jQuery -->
         <script src="js/libs/drum.js"></script> <!-- DOWNLOAD drum.js -->
         <script src="js/libs/hammer.min.js"></script> <!-- DOWNLOAD hammer.js -->
         <script src="js/libs/hammer.fakemultitouch.js"></script> <!-- DOWNLOAD hammer.fakemultitouch.js -->
         <link rel="stylesheet" href="css/libs/drum.css">
    </head>
    <body>
        <select>
        <option value="0">00</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option selected value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        </select>
        <script>
         $("select").drum();
        </script>
    </body>
</html>

This works perfectly my friend with no problem :)