Sliding Menu problem

Sliding Menu problem

Hi,

can anyone tell me if its possible to amend the following code so that the slide in section contains an unordered list of links please.

Also is it possible to have this trigger as soon as the page loads rather than on click or hover.

Cheers


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
        <title>Simple menu</title>
        <style type="text/css" media="screen">
                #menu {
                        display: block;
                        float: right;
                        width: 120px;
                        border: 1px solid #cecece;
                        margin-right: 10px;
                }
               
                #menu div.btn {
                        display: block;
                        width: 30px;
                        height: 20px;
                        float: right;
                        margin: 0 5px;
                        background-color: #cccccc;
                        color: #000000;
                        text-align: center;
                }
               
                #slideIn_container {
                        display: block;
                        float: right;
                        width: 300px;
                }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="interface.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
                $("#menu a").hover( function () {
                        var titleAttr = $(this).attr("title");
                        $("#slideIn_container").html(titleAttr);
                        $('#slideIn_container').SlideInRight(500);
                }, function () {
                        $('#slideIn_container').SlideOutLeft(300);
                });
        });
        </script>
</head>

<body>
<!-- menu block -->
<div id="menu">
        <div class="btn">1</div>
        <div class="btn"">2</div>
        <div class="btn">3</div>
</div>

<!-- slide-in container block -->
<div id="slideIn_container"></div>

</body>
</html>