bebraw/sidebar.html

## sidebar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
        <title>Sidebar</title>
        <script type="text/javascript" src="http://rightjs.org/hotlink/right-2.0.0.js"></script>
        <script type="text/javascript">
            var Generator = new Class({
                _cur: 0,
                initialize: function(items) {
                    this._items = items;
                },
                next: function() {
                    var ret = this._items[this._cur];

                    this._cur = this._cur + 1 == this._items.length? 0: this._cur + 1;

                    return ret;
                }
            });

            var sidebar_offset = new Generator(['-100px', '0px']);
            "#sidebar-handle".on('click', function() {
                new Fx.Morph('sidebar-content').start({left: sidebar_offset.next()});
            });
        </script>
    </head>
    <body>
        <div id="sidebar" style="width:120px;height:0px;background-color:blue">
            <div id="sidebar-content" style="width:100px;height:200px;position:absolute;left:0px;top:0px;background-color:green">boz<div>
            <div id="sidebar-handle" style="width:20px;height:200px;position:absolute;left:100px;top:0px;background-color:red">baz</div>
        </div>
    </body>
</html>