0

左側のサイドバーにナビゲーションがあり、その右側にメイン コンテンツがある、ごく普通のレイアウトがあります。Bootstrap の仕組みでは、画面が狭すぎる場合、ナビゲーション メニューが上部に表示され、その下にコンテンツが表示されます。

しかし、私はそれが非常に醜いと思います。表示する実際のコンテンツがある場合、ナビゲーションにそれほど多くのスペースを無駄にしたくありません。代わりに、左側に非常に狭いバーまたはボタンを配置し、それに触れると、左側からモーダル ナビゲーション メニューがスライドして表示されるようにしたいと考えています。

ブートストラップでそれを達成する方法については何も見つかりません。例やチュートリアルはありませんが、他のドキュメントもありません。

私が遭遇したいくつかの問題:グリッドの一部としてそれを行うと、小さな画面で一番上に流れますが、明らかにそれは望ましくありません。メインコンテンツの一部にすると、画面の端から離れすぎてしまいます。画面の端に置きたい。また、メインコンテンツと一緒にスクロールするので、そのままにしておきたいです。絶対的なポジショニングだと思います。

そして、これは小さな画面でのみ発生するという問題があります。大画面で、今のやり方は完璧です。そのため、通常は大きな画面に表示されるサイドバーを非表示にし、小さな画面ではモーダルとしてスライドインする必要があります。また、コンポーネントが横にスライドしたり、折りたたまれたりすることさえ見たことがありません。

では、どうやってこれを行うのですか?Bootstrapでそれはまったく可能ですか?

4

3 に答える 3

0

次の例に示すように、オフキャンバス メニューを使用できます: http://bootply.com/94838

ブラウザの幅が狭い場合、サイドバーは折りたたまれ、左側の矢印をクリックして展開できます。

于 2013-11-18T12:47:23.893 に答える
0

はい、これは確かに可能です。jPanelMenu という jQuery プラグインがあります。

http://jpanelmenu.com/

オープンソースであり、github 上にあります!

お役に立てれば!

于 2013-02-11T05:44:57.877 に答える