問題タブ [off-canvas-menu]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
3410 参照

javascript - Foundation 6 クリック後にオフキャンバス メニューが自動的に閉じる

メニュー項目がクリックされた後にキャンバス外のメニューを自動的に閉じる方法を探していましたが、何も機能していないようです。

そのため、Foundation 6 ドキュメントのキャンバス外メニューの作成方法に関するガイドに従いましたが、うまくいきました。この部分は大丈夫です。リンクメニューをクリックすると、そこにとどまり、閉じたいと思います。誰でもそれを修正する方法を知っていますか。

トリックを実行するスニペットを見つけましたが、この JS を適用した後、メニューが表示されなくなります。他の人も同じ問題を報告しています。

ここにドキュメントがありますが、私は JavaScript についてあまり知らないので、誰かに正しいコードを書いてもらいます。

0 投票する
1 に答える
253 参照

twitter-bootstrap - Bootstrap 3 オフキャンバス ナビゲーション メニューのサイズ

私には狭すぎるので、小さな画面のオフキャンバス ナビゲーション メニューのサイズを変更しようとしています。col-xs-12 に変更してみましたが、切り替えてもうまくいきません... https://getbootstrap.com/examples/offcanvas/

誰もそれを変更する方法を知っていますか?

0 投票する
1 に答える
1464 参照

javascript - キャンバス内のウィンドウをクリックしてキャンバス外のメニューを閉じる方法は?

ここに私のコードペンがあります http://codepen.io/anon/pen/GZWPrj

何度か回答されていることは知っていますが、それを自分のコードに翻訳するのは難しすぎます。

そのため、意図したとおりに機能する 2 番目のオフキャンバス メニューがあります。

追加したいことの 1 つは、このメニューを閉じる機能です。キャンバス外のメニューの外側の任意の場所をクリックして、つまりキャンバス内をクリックします。

私は次のような良い実例を見つけました

hereウィンドウのクリックでキャンバス外のメニューを閉じますが、私のバージョンのコードにそれを実装する方法を理解するにはあまりにも愚かです。

0 投票する
1 に答える
467 参照

html - オフキャンバス ナビゲーションには 2 つのメニューが表示されます

Foundation ビルディング ブロック セクションの例を使用して、「キャンバス外のナビゲーションを備えたトップ バー」に取り組んでいます。

ここに私のコードがあります、

(ps stackoverflow のコード エディターはトグル部分でも機能しませんが、jsfiddle で確認できます: https://jsfiddle.net/03bx493q/ )

そして、何か変なものを見ることができます。

  • ボタンをクリックすると (初回)、デスクトップ バージョンのメニューとオフ キャンバス メニューの両方が表示されます。次に、もう一度ボタンをクリックしてメニューを閉じます。

  • ボタンをクリックすると (2 回目)、キャンバス外のメニューのみが表示されます。

「hide-for-small」クラスをワイドメニューに追加するなど、さまざまな解決方法を試しました(期待どおりには役に立ちません)...

ありがとうございます!

0 投票する
0 に答える
134 参照

jquery - Offcanvas を使用した Bootstrap - 1 つのメニュー、データターゲットでメニューを開くための 2 つのボタン

Nav をスライドインするための Bootstraps data-target/data-toggle と Offcanvas に問題があります。
ここで見ることができる私のコードhttp://modus-media.de/kunden/test/

このレイアウトを作成する必要があり、DIV ".bar" が 2 つの異なる場所にロードされているため、問題が発生します。

マイ ナビゲーションを呼び出すためのボタンは、「ヘッダー」に 1 回、外側に 1 回読み込まれます。ヘッダーでは、(min-width: 568px)-> so hidden-xs および外側 (max-width: 568px) -> hidden-sm からのみ表示されます。
この機能は最初のボタンでのみ機能します。

私の成功はこれまでのところ限定的でした。データの親とデータのターゲットでテストしました。

メニューにアクセスできるように、ボタンを 2 回配置することは可能ですか?
または、メニューの内側と外側のより良い方法はあります<header>か?

多分誰かが私を助けることができます。前もって感謝します

0 投票する
1 に答える
4489 参照

sidebar - offcanvas-sidebar ブートストラップ 4 スティッキー サイドバー

こんにちは、最近、bootstrap 4 offcanvas テンプレートを使用してウェブサイトを構築しました

http://v4-alpha.getbootstrap.com/examples/offcanvas/#

ユーザーのスクロールに合わせてサイドバーを追従させたいのですが、ブートストラップは接辞クラスを削除し、css position sticky の使用を推奨しています。これを実行してサイドバーをターゲットにしようとしましたが、レイアウトが台無しになります。.nav のターゲティングも機能しません

HTML

CSS

おそらく、サイドバー オフ キャンバスとサイドバーの位置に関係があるのでしょう。しかし、サイドバーの絶対位置がないと、セクションのコンテンツが押し下げられます。それを削除して col-xx クラスを使用しようとしましたが、うまくいきませんでした:(

0 投票する
0 に答える
806 参照

html - オフキャンバス サイドバーの Zurb Foundation 6 スティッキー メニュー

こんにちは、Zurb Foundation 6 にスティッキー メニューを含むオフキャンバス メニューを持たせようとしています。デスクトップ ビューでサイドバーとコンテンツ ブロックの高さが同じになるように、キャンバス外のレイアウトを作り直しました。

問題:

  • スティッキー メニューがキャンバス外のサイドバーで機能しない

問題を示すJSFiddle here を作成しました。

0 投票する
1 に答える
992 参照

css - 完全なオフキャンバス メニュー

オフキャンバス メニューを作成しようとしていますが、問題が発生しました。最初の 2 つのメニュー リンクのみが灰黒色の背景で表示されていますが、すべてのメニュー リンクにそれを表示したいと考えています。残りの 5 つのメニュー リンクは、実際にはメニュー内にありますが (リンクにカーソルを合わせるとわかります)、背景が透明になっています。

html および css コードを Jsfiddle に入れました: https://jsfiddle.net/ghbx6fmn

PSコードはJsfiddleでうまく機能しているようですが、私のウェブサイトではそうではありません...