SCSS の代わりに CSS を使用して Foundation 6 で Web サイトを構築しています。小さな画面でレスポンシブなオフキャンバス ドリルダウン メニューを使用しています。デフォルトでは、オフキャンバス メニューの幅は 250px です。
問題: 代わりに、これをブラウザ ウィンドウの全幅にしたいと考えています。
幅の設定
.off-canvas.position-right widthJavaScript を使用して、 をウィンドウの幅に動的に設定し、ウィンドウrightの負の幅に設定しました。.off-canvas .drilldown max-widthまた、ウィンドウの幅に設定しました。
これはうまく機能します。これが私がやった方法です：
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();
この部分には満足していますが、問題の半分しか解決していません。
オフキャンバスの移動
メニューの幅を処理することに加えて、 を.is-open-right使用してすべてを -250px 移動していますtransform: translateX()。
関数に次の行を含めて、transform: translateX()値をウィンドウの負の幅に設定しようとしました。
var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
しかし、これはうまくいきませんでした。ウィンドウがロードされたときに.off-canvas-wrapper-innerクラスがないという事実に関係していると思います。.is-open-rightこのクラスは、ハンバーガー トグル ボタンをクリックした後に動的に追加されます.menu-icon。そこで、clickイベントリスナーを追加しようとしましたが、まだ機能しません。
これが私のJSコード全体です。
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();
どこが間違っているのでしょうか?
必ずしも私のためにソリューションをコーディングする人を探しているわけではありませんが、.is-open-right translateX値を設定する方法についてのフィードバックや指示は非常に役立ちます。
プロジェクト コード全体は次のとおりです: https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1
ライブ デモは次のとおりです: https://paulshryock.github.io/paulshryock/