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
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