問題タブ [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.
javascript - Foundation 6 クリック後にオフキャンバス メニューが自動的に閉じる
メニュー項目がクリックされた後にキャンバス外のメニューを自動的に閉じる方法を探していましたが、何も機能していないようです。
そのため、Foundation 6 ドキュメントのキャンバス外メニューの作成方法に関するガイドに従いましたが、うまくいきました。この部分は大丈夫です。リンクメニューをクリックすると、そこにとどまり、閉じたいと思います。誰でもそれを修正する方法を知っていますか。
トリックを実行するスニペットを見つけましたが、この JS を適用した後、メニューが表示されなくなります。他の人も同じ問題を報告しています。
ここにドキュメントがありますが、私は JavaScript についてあまり知らないので、誰かに正しいコードを書いてもらいます。
twitter-bootstrap - Bootstrap 3 オフキャンバス ナビゲーション メニューのサイズ
私には狭すぎるので、小さな画面のオフキャンバス ナビゲーション メニューのサイズを変更しようとしています。col-xs-12 に変更してみましたが、切り替えてもうまくいきません... https://getbootstrap.com/examples/offcanvas/
誰もそれを変更する方法を知っていますか?
javascript - キャンバス内のウィンドウをクリックしてキャンバス外のメニューを閉じる方法は?
ここに私のコードペンがあります http://codepen.io/anon/pen/GZWPrj
何度か回答されていることは知っていますが、それを自分のコードに翻訳するのは難しすぎます。
そのため、意図したとおりに機能する 2 番目のオフキャンバス メニューがあります。
追加したいことの 1 つは、このメニューを閉じる機能です。キャンバス外のメニューの外側の任意の場所をクリックして、つまりキャンバス内をクリックします。
私は次のような良い実例を見つけました
hereウィンドウのクリックでキャンバス外のメニューを閉じますが、私のバージョンのコードにそれを実装する方法を理解するにはあまりにも愚かです。
html - オフキャンバス ナビゲーションには 2 つのメニューが表示されます
Foundation ビルディング ブロック セクションの例を使用して、「キャンバス外のナビゲーションを備えたトップ バー」に取り組んでいます。
ここに私のコードがあります、
(ps stackoverflow のコード エディターはトグル部分でも機能しませんが、jsfiddle で確認できます: https://jsfiddle.net/03bx493q/ )
そして、何か変なものを見ることができます。
ボタンをクリックすると (初回)、デスクトップ バージョンのメニューとオフ キャンバス メニューの両方が表示されます。次に、もう一度ボタンをクリックしてメニューを閉じます。
ボタンをクリックすると (2 回目)、キャンバス外のメニューのみが表示されます。
「hide-for-small」クラスをワイドメニューに追加するなど、さまざまな解決方法を試しました(期待どおりには役に立ちません)...
ありがとうございます!
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>
か?
多分誰かが私を助けることができます。前もって感謝します
sidebar - offcanvas-sidebar ブートストラップ 4 スティッキー サイドバー
こんにちは、最近、bootstrap 4 offcanvas テンプレートを使用してウェブサイトを構築しました
http://v4-alpha.getbootstrap.com/examples/offcanvas/#
ユーザーのスクロールに合わせてサイドバーを追従させたいのですが、ブートストラップは接辞クラスを削除し、css position sticky の使用を推奨しています。これを実行してサイドバーをターゲットにしようとしましたが、レイアウトが台無しになります。.nav のターゲティングも機能しません
HTML
CSS
おそらく、サイドバー オフ キャンバスとサイドバーの位置に関係があるのでしょう。しかし、サイドバーの絶対位置がないと、セクションのコンテンツが押し下げられます。それを削除して col-xx クラスを使用しようとしましたが、うまくいきませんでした:(
html - オフキャンバス サイドバーの Zurb Foundation 6 スティッキー メニュー
こんにちは、Zurb Foundation 6 にスティッキー メニューを含むオフキャンバス メニューを持たせようとしています。デスクトップ ビューでサイドバーとコンテンツ ブロックの高さが同じになるように、キャンバス外のレイアウトを作り直しました。
問題:
- スティッキー メニューがキャンバス外のサイドバーで機能しない
問題を示すJSFiddle here を作成しました。
css - 完全なオフキャンバス メニュー
オフキャンバス メニューを作成しようとしていますが、問題が発生しました。最初の 2 つのメニュー リンクのみが灰黒色の背景で表示されていますが、すべてのメニュー リンクにそれを表示したいと考えています。残りの 5 つのメニュー リンクは、実際にはメニュー内にありますが (リンクにカーソルを合わせるとわかります)、背景が透明になっています。
html および css コードを Jsfiddle に入れました: https://jsfiddle.net/ghbx6fmn
PSコードはJsfiddleでうまく機能しているようですが、私のウェブサイトではそうではありません...