Tais tclaim menu

by Chase Wilson

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
<base href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/"/>
<div id="div-1">
    <div id="div-2">
<div id="tclaim-nav">
    <div id="tclaim-nav-inner">
        <h3>Tclaim Menu:</h3>
        <ul>
            <li><a href="#"><span>Dashboard</span></a></li>
            <li><a href="#"><span>Entitlement</span></a></li>
            <li><a href="#" id="switch-account"><span>Switch Account</span><span class="select ui-icon ui-icon-triangle-1-s"></span></a></li>
        </ul>
        <div class="clr"></div>
    </div>
    </div>
</div>
</div>

CSS

body {font: 13px/1.2em "Lucida Grande","Arial";}
.clr {clear: both;}
#div-2 {position:relative; left: 50%; float: left;}
#tclaim-nav {margin-top: 50px; border: 1px #efefef solid; border-radius: 5px;float: left; position: relative; left: -50%;}
#tclaim-nav #tclaim-nav-inner {padding: 5px;}
#tclaim-nav h3 {float: left;display: block; background: url('http://images.agroism.com/tclaim.png') top left no-repeat; height: 15px; width: 40px; text-indent: -5000em; }
#tclaim-nav ul {display: block; float: left; }
#tclaim-nav ul li {display: block; position: relative; float: left; border-right: 1px #ccc solid;}
#tclaim-nav ul li a {text-decoration: none; color: #333;}
#tclaim-nav ul li a:hover {color: #000;}
#tclaim-nav ul li span {padding: 3px 10px;}
#tclaim-nav ul li:last-child {border: none;}
#tclaim-nav ul li:last-child span {padding: 3px 2px 3px 10px;}
#tclaim-nav ul li .select {height: 16px; width: 18px; margin:0px 2px; padding: 0px !important; display: block; float: right; border: 1px #efefef solid; border-radius: 3px;} 
#tclaim-nav ul li .loading.select {background: #fff url('http://images.agroism.com/loading.gif') top left no-repeat !important; }
#tclaim-nav ul li:hover .select {background-color: #efefef;}

#tclaim-nav ul li .sub-nav { display: block; position: absolute; width: 138px; top: 20px; left: -2px; z-index: 100; border: 1px #efefef solid; border-top: none; background: #fff;}
#tclaim-nav ul li .sub-nav li {position: static; float: none;border: none; border-top: 1px #efefef dotted;}
#tclaim-nav ul li .sub-nav li a {display: block;padding: 3px}

JavaScript

var responseText = '{"1":{"link":"/hello","name":"029304"},"2":{"link":"/noway","name":"928394"},"3": {"link":"/radical","name":"988383"}}';

$(window).bind('switch.account', function(event, data, element){
    var linkList = $('<ol class="sub-nav">');
    $.each(data, function(index, link){
        linkList.append('<li><a href="'+link.link+'">'+link.name+'</a></li>');
    });
    console.log(data);
    $('#switch-account').parent('li').append(linkList);
});

(function($){
    $('#tclaim-nav ul li a').click(function(event){
        event.preventDefault();
    });
    
    $('#switch-account').click(function(event){
        var select = $(this).find('.select'),
            self = $(this);
        if(!$(this).data('clicked')){
            select.addClass('loading');
            $.ajax({
                type: 'POST',
                url: 'http://fiddle.jshell.net/echo/json/',
                data:{json: responseText,delay: 1},
                dataType: 'json',
                success: function(data){
                    $(window).trigger('switch.account', data);
                    select.removeClass('loading');
                },
                error: function(){
                    select.removeClass('loading');
                }
            });
            $(this).data('clicked','true');
        }
    });
    
})(jQuery);