SlideToggle从botton / top到left / right

Question

I have a little problem that I'd love to solve on my website. Have a look at this JSFIDDLE — https://jsfiddle.net/sm25t089/

This is the javascript code:

$(document).ready(function () {
$(".bottoni").hide();
$(".reveal").click(function () {
    $(this).toggleClass("active").next().slideToggle(200, "linear");

    if ($.trim($(this).text()) === '(+)') {
        $(this).text('(×)');
    } else {
        $(this).text('(+)');
    }

    return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});

I'd love the menu to move from out-of-the-screen to the left, to the right, instead the actual bottom to top.

Thanks for the help. F.

Answer 1

here is one solution using css3

transition:0.3s;

https://jsfiddle.net/sm25t089/1/

if you prefer using only ccs2 then you can do the same with a jquery animate

Answer 2

You can use the jQuery method .animate()

(function($) {
    $(document).off("click.slide").on("click.slide", ".reveal", function (e) {
        var $self = $(this),
            $menu = $(".bottoni"),
            isActive;
        e.preventDefault();
        $self.toggleClass("active");
        isActive = $self.hasClass("active");

        $self.text(isActive ? "(x)" : "(+)");

        $menu.animate({
            "left": isActive ? "21px" : "-100px"
        }, 200, "linear");

    });
})(jQuery);

Here are a JSFiddle with the sample: https://jsfiddle.net/sm25t089/3/