CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
sam
sam

Reputation: 10064

slide out 'mobile' type menu using jquery ui

Im trying to write a little script to slide all of a pages content over to reveal a hidden menu like this image from the facebook mobile site below.

slide out menu example

Ive tried to recreate this using the jquery ui slide function but cant quite get it to work, ive been using 

$('.click').click(function() {
    $('.slider').toggle("slide", {
        direction: "right",
        distance: 100
    }, 500);
});

which is half way there, but i cant quite work out how to take it further, im not trying to slide all the content over, just 90% as the image above so you can still see a peice of the main content, any ideas ? ive made a jsfiddle here http://jsfiddle.net/pudle/ckNx9/4/

Upvotes: 1

Views: 5639

Answers (3)

user2001702
user2001702

Reputation:

This is probably the easiest:

$('.slider').slideToggle('slow');

More info here: http://api.jquery.com/slideToggle/

Upvotes: 0

sd7syfsk
sd7syfsk

Reputation: 61

As far as I can see the jQuery UI toggle slide effect shows/hides the entire container. You can achieve the effect you describe using a bit of jQuery alone:

http://jsfiddle.net/ckNx9/7/

$('.click').on('click', function() {
    if($('.slider').hasClass('out')) {
       $('.slider').animate({
            left: '0px'
        }, 500).removeClass('out');
    } else {
        $('.slider').animate({
            left: '180px'
        }, 500).addClass('out');
    }
});

Upvotes: 2

Vektor
Vektor

Reputation: 580

Here you go: http://jsfiddle.net/ckNx9/6/

It involved hiding the slider initially, then allowing the toggle to show/hide it as it is sliding by 180px.

Below is the modified CSS for the .slider.

.slider {background:blue; width: 180px; height: 200px; display: none;}

Upvotes: 2

Related Questions