i came across a jquery slide out menubar here http://tympanus.net/Tutorials/UIElements/SlideOutMenu/ . its a mouse over menu bar made with jquery . however i would like to know if the slide out can be brought out through a click rather than a mouse over .

here is the source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>UI Elements: jQuery Horizontal Slide Out Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="UI Elements: jQuery Horizontal Slide Out Menu" />
        <meta name="keywords" content="jquery, ui, horizontal menu, slide out"/>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                //graceful degradation
                $('#ui_element').find('ul').css({
                    'left'	:	'-660px'
                }).siblings('.mh_right').css({
                    'left'	:	'200px'
                });
				
                var $arrow = $('#ui_element').find('.mh_right');
                var $menu  = $('#ui_element').find('ul');
                $arrow.bind('mouseenter',function(){
                    var $this 	= $(this);
                    $this.stop().animate({'left':'160px'},50);
                    $menu.stop().animate({'left':'202px'},500,function(){
                        $(this).find('a')
                        .unbind('mouseenter,mouseleave')
                        .bind('mouseenter',function(){
                            $(this).addClass('hover');
                        })
                        .bind('mouseleave',function(){
                            $(this).removeClass('hover');
                        });
                    });
                });
                $menu.bind('mouseleave',function(){
                    var $this 	= $(this);
                    $this.stop().animate({'left':'-660px'},500,function(){
                        $arrow.stop().animate({'left':'200px'},500);
                    });
                });
            });
        </script>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
             body{
                background-color:#f0f0f0;
                font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
            }
            h1{
                font-size:180px;
                line-height:180px;
                text-transform: uppercase;
                color:#ddd;
                position:absolute;
                text-shadow:0 1px 0 #fff;
                top:-25px;
                left:-20px;
                white-space: nowrap;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#666;
                text-decoration:none;
                text-transform: uppercase;
                text-shadow:0 1px 0 #fff;
            }
            span.reference a:hover{
                color:#ccc;
            }
            .box{
                border:15px solid #fff;
                margin:180px 0px 0px -15px;
                height:240px;
                position:relative;
                padding:30px 10px 30px 50px;
                -moz-box-shadow:0px 0px 2px #ccc inset;
                -webkit-box-shadow:0px 0px 2px #ccc inset;
                box-shadow:0px 0px 2px #ccc inset;
                background:#f6f6f6 url(click.png) no-repeat 200px 120px;
            }
            .box h2{
                text-transform: uppercase;
                color:#ccc;
                text-shadow:0 1px 0 #fff;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <h1>UI Elements</h1>

            <div class="box">
                <h2>jQuery Horizontal Slide Out Menu</h2>
                <div id="ui_element" class="mh_wrapper">
                    <ul>
                        <li><a href="#" class="hover">Menu Item A</a></li>
                        <li><a href="#">Menu Item A B</a></li>
                        <li><a href="#">Menu Item A C</a></li>

                        <li><a href="#">Menu Item A AA</a></li>
                        <li><a href="#">Menu Item A BB</a></li>
                        <li><a href="#">Menu Item A CC</a></li>
                    </ul>
                    <div class="mh_itemMain">Menu</div>
                    <div class="mh_right"></div>
                </div>

            </div>
        </div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/06/21/ui-elements-combobox/">© Codrops - back to post</a>
            </span>
        </div>       
    </body>
</html>

here is the CSS :

.mh_wrapper{
  height:40px;
  line-height:40px;
  position:absolute;
  top:80px;
  left:0px;
  font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
  font-size:16px;
  text-transform:uppercase;
}
.mh_itemMain{
  color:#f0f0f0;
  z-index:10;
    border:1px solid #222;
    background-color:#222;
  cursor:pointer;
  text-align:left;
  font-weight:bold;
  text-indent:20px;
  width:200px;
  position:absolute;
  top:0px;
  left:0px;
  text-shadow:1px 1px 1px #000;
}
.mh_itemMain:hover{
  color:#fff;
}
.mh_right{
    width:40px;
    height:40px;
    position:absolute;
    left:160px;
    top:0px;
    cursor:pointer;
    border:1px solid #000;
    background:#000 url(right.png) no-repeat center center;
}
.mh_wrapper ul {
  position:absolute;
  left:202px;
  top:0px;
  width:900px;
  list-style:none;
  padding:0px;
  height:30px;
}
.mh_wrapper ul li a{
  text-decoration:none;
  cursor:pointer;
  display:block;
  float:left;
  margin:0px;
  text-indent:0px;
  padding:0px 10px 0px 3px;
  line-height:40px;
  height:40px;
  text-indent:10px;
  letter-spacing:1px;
  color:#ddd;
  background-color:#525252;
  text-shadow:1px 1px 1px #000;
  border:1px solid #333;
  border-left:none;
}
.mh_wrapper ul li a.hover{
  background:#333;
  color:#fff;
  -moz-box-shadow:0px 0px 3px #000 inset;
  -webkit-box-shadow:0px 0px 3px #000 inset;
  box-shadow:0px 0px 3px #000 inset;
}

Hi, .click() is for mouse click in jQuery. When you are binding it it's called like this. .bind('click') You might also like to check jQuery's toggle() function.

Hope this was of help.