slide menu; responsive container images

[vulkanus]

Hello,
can you help me with css / js so that when the menu opens, in dropdown form the body of the page moves to the right and automatically adjusts to the window.
At the moment I have some part of the code that does this instruction, however the images do not fit the container, and the imagens are dispersed from one another, in this images I´m using mansory/isotope (so if I resize the window 1px, the imagens adjust automatically).

I´m using this js on click un toggle menu:
function openNav() {
document.getElementById(“main-navigation”).setAttribute(“style”,”margin-width:290px; transition:margin-left .2s; “);
document.getElementById(“page”).setAttribute(“style”,”margin-left:290px; transition:margin-left .2s”);
}

resume:
1 – at menu open, move “page” to right fit int windows browser size without create scrool;
2 – Images resize automatically to the container windows size.

I cannot give you a code-pen because the project is localhost.
Thank you.

[vulkanus]

hi

No One?

[LearnTheNew]

can you provide your query code with codepen link.

[vulkanus]

Hi @LearnTheNew

can not, it’s a complex code.

I analyzed it better and found that part of that mistake is something I lack in masonry. I have it set horizontally, but it lacks the vertical part. The masonry itself is fading well, because if we readjust the browser window, the images line up side by side without leaving a disproportionate margin.

Do you have any clue?

thank you

[vulkanus]

Hi,

For those who need it, in my case, it was solved in this way, I have to add ImagesLoaded() function.

$grid.imagesLoaded().progress( function() {
$grid.masonry(‘layout’);
});

[Author]

Posts