Paul Shryock Paul Shryock - 1 month ago 11
CSS Question

Foundation 6: How to set .is-open-right translateX value with JavaScript

I am building a website with Foundation 6 using CSS instead of SCSS. I'm using the responsive off-canvas drill-down menu on small screens, and by default, the off-canvas menu width is 250px.

Problem: I would like this to be the full width of the browser window instead.

Setting the Width



I have used JavaScript to dynamically set the
.off-canvas.position-right
width
to the width of the window, and
right
to the negative width of the window. I've also set the
.off-canvas .drilldown
max-width
to the width of the window.

This works well, and here's how I did it:

function setOffCanvasWidth() {

var windowWidth = window.innerWidth,
offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
isDrilldown = document.querySelector( '.off-canvas .is-drilldown' );

offCanvasRight.style.width = windowWidth + "px";
offCanvasRight.style.right = "-" + windowWidth + "px";
isDrilldown.style.maxWidth = windowWidth + "px";

}
setOffCanvasWidth();


I'm happy with this part, but it only solves half of the problem.

Moving the Off-Canvas



In addition to dealing with the width of the menu,
.is-open-right
is moving everything over by -250px using
transform: translateX()
.

I tried including these lines in my function to set the
transform: translateX()
value to the negative width of the window:

var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";


But this didn't work. I think it has to do with the fact that
.off-canvas-wrapper-inner
doesn't have the class
.is-open-right
when the window loads. That class is added dynamically after clicking the hamburger toggle button, which has a class of
.menu-icon
. So I tried adding a
click
event listener, but it still doesn't work.

Here is my JS code in its entirety:

function setOffCanvasWidth() {

var windowWidth = window.innerWidth,
offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
isDrilldown = document.querySelector( '.off-canvas .is-drilldown' ),
menuIcon = docuemnt.querySelector( '.menu-icon' ),
offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );

offCanvasRight.style.width = windowWidth + "px";
offCanvasRight.style.right = "-" + windowWidth + "px";
isDrilldown.style.maxWidth = windowWidth + "px";

menuIcon.addEventListener( 'click', function() {
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
} );

}
setOffCanvasWidth();


Where Am I Going Wrong?



I'm not looking for anyone to code the solution for me, necessarily, but any feedback and direction on how I might set the
.is-open-right
translateX
value would be very helpful.

Here is the entire project code: https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1

Here is a live demo: https://paulshryock.github.io/paulshryock/

Answer

Use a translateX value of -100%. Percentage transformations are based on the element's dimensions, so 100% would be equal the element's width. At this point no JavaScript would be needed.

On that note, I would recommend setting the menu's left to 100% instead of setting right to the negative width.