<link rel="stylesheet" href="{tpl_url}/css/jquery.ferro.ferroMenu.css" type="text/css">
<script src="{tpl_url}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.ferro.ferroMenu-1.1.min.js" type="text/javascript"></script>

 <ul id="nav">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
    <li><a href="#">item 6</a></li>
</ul>

 $(document).ready(function() {
    $('#nav').ferroMenu();
});

 $(document).ready(function() {
    $("#nav").ferroMenu({
        position    : "left-center",
        delay       : 50,
        rotation    : 720,
        margin      : 20
    });
});

 
$(document).ready(function() {
    $(document).on("menuready",function(){
        //do stuff
    });
     
    $(document).on("menuopened",function(){
        //do stuff
    });
     
    $(document).on("menuclosed",function(){
        //do stuff
    });
     
    $(document).on("menudragstart",function(){
        //do stuff
    });
     
    $(document).on("menudrag",function(){
        //do stuff
    });
             
    $(document).on("menudragend",function(){
        //do stuff
    });
});