创建Jquery滑动菜单

时间:2013-10-01 04:41:39

标签: javascript jquery html css menu

想要在此网站幻灯片上创建jquery菜单,从左侧单击图标恢复到其原始位置。

http://wittlingerorthodontics.com/default2.asp

只能在jsFiddle上实现这个目标

http://jsfiddle.net/messi1987/tfASa/

$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";

// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 1000 );
};

// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});

然而我想让它滑入和点击按钮/图像幻灯片回到orignal positon。 jquery的新手,所以不要在任何地方获得帮助内容。帮帮我这样做。 要完整了解,请查看引用的网站。

1 个答案:

答案 0 :(得分:3)

尝试这个小提琴,我认为this是你想要的

$(function() {
    $('#button').click(function(){
         $(".ul_menu").toggleClass('show');
        if( $(".ul_menu").hasClass('show')){
        $(".ul_menu").show("slide",{direction: 'left'});
        }else{
          $(".ul_menu").hide("slide",{direction: 'left'});
        }
    });
    $('#button').mouseleave(function(){
        if($(".ul_menu").hasClass('show')){
           $(".ul_menu").hide("slide",{direction: 'left'});
        }
    })
});