QQ菜单效果

<style type="text/css">
    #oContainer {
                  width: 130px;
                  height: 300px;
                  border: 1px solid menu;
    }
</style>
<script language="javascript">
    var oTime, oTencent = new Object();

    function Tencent(_container) {
        this.author = '51JS.COM-ZMM';
        this.version = 'Tencent 1.0';
        this.container = _container;
        this.box = (function(_object) {
             var _box = document.createElement('DIV');
             _box.id = 'TencentBox';
             _box.style.width = _object.offsetWidth;
             _box.style.height = _object.offsetHeight;
             return _box;
        })(this.container);
        this.container.appendChild(this.box);
        this.toolRecord = new Object();
        this.barCount = 0;

        this.drawTencent = function(_barList, _barHeight, _barDelay, _barAmount) {
             var _bool = true;
             this.barList = [];
             this.toolList = [];
             this.barHeight = _barHeight;
             this.barDelay = _barDelay;
             this.barAmount = _barAmount;
             for (var i in _barList) this.barCount ++;
             this.toolHeight = parseInt(this.box.style.height) - this.barCount * this.barHeight;
             for (var i in _barList) {
                  var _bar = document.createElement('BUTTON');
                  _bar.style.width = this.box.style.width;
                  _bar.style.height = _barHeight;
                  _bar.style.textAlign = 'center';
                  _bar.value = i.toString();
                  _bar.hideFocus = true;
                  _bar.attachEvent('onclick', this.doClick);
                  this.box.appendChild(_bar);

                  var _tool = document.createElement('DIV');
                  _tool.align = 'center';
                  _tool.style.width = this.container.offsetWidth - 2;
                  _tool.style.overflowY = 'auto';
                  _tool.style.fontSize = '9pt';
                  _tool.style.height = (_bool) ? this.toolHeight : 1 ;
                  _tool.style.display = (_bool) ? 'inline' : 'none' ;
                  _tool.innerHTML = (function(_array) {
                        var _html = new String();
                        var _bool = new Boolean(true);
                        _bool = _bool & (typeof(_array[1]) == 'object');
                        _bool = _bool & (typeof(_array[2]) == 'object');
                        _bool = _bool & (typeof(_array[3]) == 'object');
                        if (_bool) {
                            _bool = _bool & (_array[1].length == _array[2].length);
                            _bool = _bool & (_array[1].length == _array[3].length);
                            _bool = _bool & (_array[2].length == _array[3].length);
                            if (_bool) {                             
                                for (var j=0; j<_array[0]; j++) {
                                     _html += '<div style="padding-top: 5px;">';
                                     _html += '<button οnclick="window.open(/'' + _array[2][j] + '/', /'_blank/');" style="background-color: transparent;cursor: hand;border: 0px;">';
                                     _html += '<img src="' + _array[1][j] + '"><br>' + _array[3][j];
                                     _html += '</button>';
                                     _html += '</div>';
                                }
                            } else {
                                window.alert('arguments error!');
                            }
                        } else {
                            _bool = _bool & (typeof(_array[1]) == 'string');
                            _bool = _bool & (typeof(_array[2]) == 'string');
                            _bool = _bool & (typeof(_array[3]) == 'string');
                          
                            if (!_bool) {
                                _html += '<div style="padding-top: 5px;">';
                                _html += '<button οnclick="window.open(/'' + _array[2] + '/', /'_blank/');" style="background-color: transparent;cursor: hand;border: 0px;">';
                                _html += '<img src="' + _array[1] + '"><br>' + _array[3];
                                _html += '</button>';
                                _html += '</div>';
                            } else {
                                window.alert('arguments error!');
                            }
                        }
                        return _html;                       
                  })(_barList[i]);
                  this.box.appendChild(_tool);

                  this.barList[this.barList.length] = _bar;
                  this.toolList[this.toolList.length] = _tool;
                  if (_bool) { this.barCurrent = _bar; this.toolCurrent = _tool; _bool = false; }
             }
        }

        this.doClick = function() {
             var _eventBar = window.event.srcElement;
             with (oTencent) {
                   if (!oTime && (barCurrent != _eventBar)) {
                       for (var i=0; i<barList.length; i++) {
                            if (barList[i] == _eventBar) {
                                barCurrent = barList[i];
                                toolRecord = toolCurrent;
                                toolCurrent = toolList[i];
                                toolCurrent.style.display = 'inline';
                                changeTool();
                                return true;
                            }                     
                       }       
                   } else {
                       return false;
                   }
             }
        }

        this.changeTool = function() {
             if (parseInt(this.toolCurrent.style.height) < this.toolHeight) {
                 with (this.toolRecord.style) {
                       height = ((parseInt(height) - this.barAmount) > 0) ? (parseInt(height) - this.barAmount) : 1 ;
                 }
                 with (this.toolCurrent.style) {
                       height = ((parseInt(height) + this.barAmount) < this.toolHeight) ? (parseInt(height) + this.barAmount) : this.toolHeight ;
                 }
                 oTime = window.setTimeout('oTencent.changeTool()', this.barDelay);
             } else {
                 this.toolRecord.style.display = 'none';       
                 oTime = window.clearTimeout(oTime);
             }
        }
    }

    window.onload = function() {
        var _barList = new Object();
        _barList['我的同学'] = [3, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['1.htm', '2.htm', '3.htm'], ['华华', '南南', '振振']];
        _barList['我的同事'] = [4, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['4.htm', '5.htm', '6.htm', '7.htm'], ['妖妖', '星空网络', '蛋蛋', '冰雪']];
        _barList['管理设置'] = [2, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['8.htm', '9.htm'], ['修改密码', '个人资料']];
        _barList['黑 名 单'] = [1, 'http://www.ctrl.net.cn/zmm/Sample.jpg', '10.htm', '松松'];
        var _barHeight = 21;
        var _barDelay = 10, _barAmount = 50;

        oTencent = new Tencent(self.oContainer);
        oTencent.drawTencent(_barList, _barHeight, _barDelay, _barAmount);
    }
</script>
<div id="oContainer"></div>