Animowane otwarcie koszyka w sklepie internetowym

0

Strasznie podoba mi się efekt, jaki uzyskuje się po naciśnięciu koszyka (prawy górny róg) na poniższej stronie:
https://pl.coccodrillo.eu/
Po naciśnięciu całe zielone menu przesuwa się w lewo (likwidując logo), cała strona się zmniejsza i staje się zamglona. Z prawej strony z kolei płynnie wsuwa się "pojemnik" koszyka.
Jak taki efekt uzyskać stosując js?

0

Nie potrzebujesz do tego js'a

Tutaj masz demo. Wystarczy sam CSS i checkbox hack.

Na stronie użyli do tego takiego śmierdzącego kodu:

$('#menuRight > ul > li > a').click(function (e) {
 
        if ($(this).parent().hasClass('open')) {
            $(this).parents('.open').removeClass('open');
            $(this).parents('.topTier').removeClass('hasOpen');
 
            $('#switchSearch').removeClass('open');
            $('.searchBox').removeClass('open');
            $('.coverGrey').removeClass('showed');
 
            return;
        }
        else {
            $(this).parents('header#main').find('.open').removeClass('open');
            if ($(this).parent().hasClass('search')) {
                $('body').removeClass('shifted');
                $('#switchSearch').addClass('open');
                $('.searchBox').addClass('open');
                $('.searchBox .inputWrap input').focus();
                $('.coverGrey').addClass('showed');
            }
        }
 
        if ($(this).parent().parent().children('.open').length) {
            $(this).parents('.topTier').addClass('hasOpen');
        }
        $(this).parent().parent().children('.dropdown').not(this).removeClass('open');
 
        if ($(this).parent().hasClass('dropdown')) {
            $(this).parent().addClass('open');
            $('.coverGrey').addClass('showed');
        }
        else if ($(this).parent().parent().children('.open').length == 0 && !$(this).parents('#menuRight').hasClass('open')) {
            $(this).parents('.topTier').removeClass('hasOpen');
        }
        //   return false;
    });
0

Przecież to jest kod JS'a, korzystający do tego z JQuery, a nie sam CSS.

0

@Desu napisał że można to zrobić inaczej niż zaproponowali na tej stronie.

0

na rozdzielczości mobile tak średnio to wygląda

1 użytkowników online, w tym zalogowanych: 0, gości: 1