0

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;
}
2
Contributors
1
Reply
3
Views
6 Years
Discussion Span
Last Post by kekkaishi
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.