CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Zahid Khan
Zahid Khan

Reputation: 1260

Creating Jquery sliding menu

Want to create jquery menu like on this website slide from left and when click on icon restores to its orignal position.

http://wittlingerorthodontics.com/default2.asp

only able to achieve this on 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;
});
});

whereas i want to make it slide in and on click to button/image slides back to orignal positon. New to jquery so do'nt get the helping content any where. Help me out to do this. for complete understanding check the referenced website.

Upvotes: 0

Views: 1044

Answers (1)

Anna Gabrielyan
Anna Gabrielyan

Reputation: 2170

try this fiddle , i think this is what u want

$(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'});
        }
    })
});

Upvotes: 3

Related Questions