jQuery Flower Navigation v1.0

https://github.com/somatonic/jquery-flowernav

HTML

<div id="log"></div>
<nav id="webdesign">
    <ul>
        <li><a href="#webdesign" class="navbutton">WebDesign</a>
            <ul>
                <li><a href="#1" title="Caption"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#2"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#3"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#4"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#5"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#6"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#7"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#8"><img src="https://scontent.xx.fbcdn.net/hprofile-xft1/v/t1.0-1/p50x50/1010142_770016449701244_1406600653785459764_n.png?oh=b4d3e03abfe0244b88f3cb66d0a55d26&oe=56EBE159"/></a></li>
                <li><a href="#9"><img...

CSS

body{ background-color:#eada95; font:normal 12px sans-serif; }
a,a:visited{text-decoration:none;}

nav { display:block; position:absolute; }
nav img { border:none }

nav#webdesign { top:40%; left:50%; width:50px; height:50px; }
nav#flash { top:30%; left:40%; width:50px; height:50px; }

nav ul { margin:0;list-style-type:none;}
nav ul li { position:relative;}
nav ul ul { margin:0;list-style-type:none;}

nav ul ul li img{ width:100%; }

nav ul ul li {
    width:50px; height: 50px;
    background-color:#345;
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 5px #aaa;
    box-shadow: 0px 0px 5px #aaa;
    margin:0;
    /* these are set by the plugin to maintain degradation
    position:absolute;
    top:0;left:0;
    display:block;
    */
}

.navbutton{
    position:absolute;
    width:100px; height:100px; line-height: 100px;
    top:-25px;left:-25px; /* needed offset for centering button to circle*/
    color:#aaa;
    text-align:center; 
    background-color:#fff; 
    cursor: move;
    -moz-box-shadow: 1px 1px 12px rgba(0,0,0,.4);
    -moz-border-radius: 50px;
    -webkit-box-shadow: 1px 1px 12px rgba(0,0,0,.4);
    -webkit-border-radius: 50px;
    box-shadow: 1px 1px 12px rgba(0,0,0,.4);
    border-radius: 50px; 
    font-size:17px;
}


.navbutton:hover{
    color: #400;
    background-color:#fff;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
    box-shadow: 0px 0px 4px rgba(0,0,0,.5);
}


#flash ul ul li {
    width:85px; height: 64px;
    background-color:#345;
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 0px 5px #aaa;
    box-shadow: 0px 0px 5px #aaa;
    margin:0;
    /* these are set by the plugin to maintain degradation
    position:absolute;
    top:0;left:0;
    display:block;
    */
}
#flash .my_button{
    position:absolute;
    width:64px; height:64px; line-height: 64px;
    top:0;left:9px; /*needed for centering circle to button...

JavaScript

(function($){
$.fn.flowernav = function( options, callback ) { 

    var defaults = {
        'radius'            : 50,
        'direction'            : 'cw',
        'speed'                : 3,
        'rotate'            : true,
        'radiusX'            : 110,
        'radiusY'            : 110,
        'oSpeed'            : 500,
        'cSpeed'            : 400,
        'easingOpen'        : '', // jquery default swing
        'easingClose'        : '', // jquery default swing
        'hoverStop'            : true,
        'hoverOpacityIn'    : 1,
        'hoverOpacityOut'    : 0.5,
        'hoverSpeedIn'        : 600,
        'hoverSpeedOut'        : 600,
        'intv'                : 30,
        'offset'            : 0,
        'drag'                : false,
        'onOpenStart'        : function(){},
        'onOpenEnd'            : function(){},
        'onCloseStart'        : function(){},
        'onCloseEnd'        : function(){}
    };

    return this.each( function() {        
        // If options exist, lets merge them with our default settings
        if ( $.isFunction( options ) ) {
            callback = options;
            options = {};
        }
        var settings = $.extend({}, defaults, options);
        
        var $this = $(this);

        if ( callback ) { callback.call($this); }
        var $button  = $this.find('ul li a:first');
        
        var childcount = $this.find('ul ul li').size();
        var $childs = $this.find('ul ul li');
        var spacing = 360 / childcount;

        var ai;
        var ite = 0;
        var istoggle = false;
        
        $button.data('isopen', 0);
        $button.data('canopen', 1);
        $button.css({zIndex:1001});
        $this.find('ul ul li').css({ opacity: 0, position:'absolute', zIndex: 999, display:'block', margin:0, padding:0, top:0, left:0 });

        // makes the menu draggable
        if(settings.drag){
            if($.isFunction($().draggable)){
               ...