問題タブ [off-canvas-menu]

私はこのウェブサイトを初めて使用し、コーディングもまったく初めてです。キャンバス外のメニューを作成しようとしていますが、3 つの小さな問題が発生しました。まず、展開されたメニューの幅を変更するにはどうすればよいですか? 次に、3 行のメニュー ボタンを画面の左側ではなく右側に配置するにはどうすればよいですか? 第三に、ホバーすると開く拡張可能なオフキャンバス メニューにサブメニューを追加するにはどうすればよいですか?

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

Wordpress サイトにオフ キャンバス メニューを実装しようとしています。メニューのコーディングに関する指示は、次のサイトから取得されます。

http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html

問題は、メニューを開いたときにマウスがメニュー上にあるときに、メニューの下にあるサイトのコンテンツをスクロールできないことです。メニューは画面の多くのスペースを占めるため、モバイル版では特に重要です。そのため、サイトのコンテンツをスクロールできることが非常に重要です。

したがって、基本的にはメニューをスクロールできないようにしたいのですが、メニューが表示されているかどうかに関係なく、サイトのコンテンツは常にスクロール可能である必要があります。

キャンバス外のプッシュ メニューを作成していますが、すべてが機能しています。いくつかの側面がわかりません。

1. content-wrapper のスクロールを無効にする方法。

2. オフ キャンバス メニューのみをスクロールする方法。現在、ウェブサイト自体の高さをスクロールしています。

これは、私が直面している問題を示すコード ペンです。

コードペンのデモ

HTML

CSS

JS

ありがとう！

以下のコードがあり、リンクをクリックしたときに div を表示/非表示にしようとしています。基本的に、リンクをクリックすると「アクティブ」クラスが div に追加され、代わりに「非表示」クラスと display:block が削除されます。私が抱えている問題は、この div をキャンバス外のメニューに表示/非表示にすることです。私はそれを機能させることができないようです。

スタイル:

リンク:

区分:

脚本

実際のページへのリンクは次のとおりです。

http://lavacable.com/satc/eb/rightonly.html

どうすればそれを行うことができますか。

これは私の現在のウィップです：

https://jsfiddle.net/Lg0wyt9u/967/

削除ボタンは一時的に非表示になっています。

起こるべきことは、それが明らかになり、他のコンテンツがこの要素と同じ幅に「キャンバス外」に押し出されることです。しかし、私はどのように進むべきかわかりません。私は display:flex を使用して配置を試みましたが、うまくいきませんでした。

オフ キャンバス サイドバー メニューを使用するブートストラップ サイトに取り組んでいます。このメニューは、アイテムがカートに追加されると、980px 未満の幅でカートの内容を含むミニバスケットを表示します。メニューの一番下にチェックアウトボタンがあります。このボタンは、ログイン/登録フォームのモーダルをトリガーします。このモーダルがトリガーされると、サイドバー メニューは開いたままになります。

問題: 実際のモーダル ボディ コンテンツは、サイトおよびブートストラップ サイト サンプルの他のすべてのコンテンツと同様に適切に表示されるのではなく、サイドバー コンテンツの「下」に表示されます。z-indexの問題かそうです。:/ どのように遊んでも、何も機能していないようです。

実際のモーダル コードは、サイドバーからページの上部に移動されました。私の考えでは、これによりほとんどの表示の問題が軽減されるはずです。モーダルが開いているときにオフキャンバスメニューのzindexをオーバーライドするルールを使用しようとしましたが、失敗しました。

どんなアイデアでも大歓迎です！

ありがとう！ジュリー

ブートストラップモーダル...

オフ キャンバス サイドバー...

ブートストラップのオフキャンバスの例を両側で機能させようとしています。これまでのところ、両側でスライドさせることができましたが、何らかの理由で css があまり得意ではないため、メニューがあるべき場所に配置されていません。非常によく似たテンプレートが bootply にあったので、ここに非常によく似た例を示します。

こんにちは、右側のサイドバーが大きいディスプレイでは動かなくなり、小さいディスプレイではキャンバスの外に出てしまうという問題に、何年も苦労してきました。私はテストサイトに近づいていますが、SEはWebサイトへのリンクを好まないため、リンクできないのではないかと心配していますが、コードが多すぎて、すべてをjsfiddleにするのに苦労しました。私が試してみました。

人々が提供できるポインタを何でも取ることができるとします。それもありがたいです。これは私のサイトへのリンクです（私はウェブサイトを使用していないため、非seo）、私が間違っている場所で私を助けるのに役立つかもしれません. ありがとう。 http://kompressaur.com/index.html

モバイルブレークポイントに到達するまで、すべて正常に動作します。次に、表示されるトグルナビゲーションボタンは何もしたくありません。私の魂が破壊されたので、すべての助けに感謝します。ここまで来るのに7年近くかかりました..それでもまだかなり貧弱です.

ありがとう

:(