CODEWITHSUNDEEP
jqueryhtmlcss
Patsy Issa
Patsy Issa

Reputation: 11303

how to make a jquery menu that slides and hides what was before?

Basically what i am trying to achieve is having the ul menu on the left side of my content div, at the start only one li should be visible. Once clicked it has to slide out or a sort of animation and be replaced by 4 li that contain the different navigation 

(function($){
    $(function(){

        $('li.dropdown').click(function() {
            $(this).fadeOut('slow')
                    .siblings('li.stage2').css('display', 'block');
        });
    });
})(jQuery);

this currently does it but the siblings coming in isn't smooth and when the fadOut animation is over they jump in the place of the other, any help would be appreciated.

EDIT Not a drop down menu.

Upvotes: 1

Views: 251

Answers (2)

Dexter Huinda
Dexter Huinda

Reputation: 1222

Kindly take a look at this code. I built your code fragment and came up with this.

CSS:

ul { width: 200px; margin: 20px 0 0 20px; }
li { color: #fff; text-align: center; background-color: #000; border-bottom: 1px dotted #fff; }
li.stage2 { background-color: #0000ff; display: none; }

​

HTML:

<ul id="menu">
    <li class="dropdown">First Stage Menu</li>
    <li class="stage2">Second Stage - 1</li>
    <li class="stage2">Second Stage - 2</li>
    <li class="stage2">Second Stage - 3</li>
    <li class="stage2">Second Stage - 4</li>
</ul>

JS:

$(document).ready(function() {
    $('li.dropdown').click(function() {
        $(this).animate({opacity:0},1000);
        $(this).siblings('li.stage2').fadeIn(1000);
        $(this).parent().animate({marginTop: '-=20'},1000);
    });​
});

See it in action here: http://jsfiddle.net/P9TQA/1/ Good luck.

Upvotes: 2

Mantas Vaitkūnas
Mantas Vaitkūnas

Reputation: 744

I had the same problem, here is the example how i solved it:

$("#menu-balticpoint li").mouseover(function() {

                var id = $(this).attr('id');
                var width = $("#"+id+" a").width();
                $("#"+id+" ul li a").css("width", width+"px");
                $("#"+id+" ul").slideDown('fast').show();
        $(this).hover(function() {
        }, function(){
            $("#"+id+" ul").fadeOut('slow').hide().stop(true, true); //When the mouse hovers out of the subnav, move it back up
        });
        });

Upvotes: 0

Related Questions