CODEWITHSUNDEEP
jqueryhtmlcss
Keiran Lovett
Keiran Lovett

Reputation: 604

Animating a toggle sliding menu

I'm creating a menu that behaves in a similar fashion to the facebook mobile menu. You can find my progress here - http://jsfiddle.net/923GK/

I'd like it to be collapsed in it's default state, then when someone clicks say "dashboard" it will then slide out display the sub-list for the dashboard. If they click dashboard again it will then toggle back to the default closed state. If the secondary menu is open however and they click the "blog" menu, instead of closing up again it will simply display the blog sub-menu with no fancy transition.

I've been trying for ages but each attempt to get this working just ends up with more mess than before. If anyone better skilled at jquery could take a peek I'd be grateful.

Upvotes: 0

Views: 284

Answers (1)

adeneo
adeneo

Reputation: 318352

var last, elm = $('#menu');

$('.secondary').hide();
elm.css('width', 100);

$('#menu li a').on('click', function(e) {
    e.preventDefault();
    if (elm.width()>100) {
        if (last == this) {
            elm.animate({width: elm.width()<340?350:100});
        }else{
            $(this).next('.secondary').show();
            $(last).next('.secondary').hide();
        }
    }else{
        $(this).next('.secondary').show();
        elm.animate({width: elm.width()<340?350:100});      
    }
    last = this;
});

FIDDLE

Upvotes: 1

Related Questions