/ オフキャンバスでの/ Bootstrapテンプレートnav-twitter-bootstrap-3

オフキャンバスを使ったブートストラップテンプレート - twitter-bootstrap-3

これはコーディングの問題ではなく、指示の迅速な停止です。

私は、ブートストラップフレームワークを使用して探しています私の次のプロジェクト。ブートストラップ3の公式サイトには、デフォルトのテンプレートが豊富に用意されていますが、私には同じ欠点があります - 私は以下で説明します。

最高のレスポンスデザイン機能の1つが、JSとCSSのメディアクエリを組み合わせることで、トップを横切って通常のナビゲーションを行い、隠れた(クリック時の)展開/折りたたみメニューにすることができます。これは素晴らしいですが、すべての例ではメニューリンクを下に置くだけで、電話では問題なく見えますが、「About」などの1語のリンクが768px幅のdiv。

はるかに良い解決策は、それを左またはサイトのコンテンツをプッシュまたはオーバーラップする右のスライディングメニューバー。残念なことに、そのような例のメニューもありません。少なくとも、私はそれらを見つけることができませんでした。

ここで私はいくつかの助けが必要です - より小さなビューポートブラウザのための右サイドメニューを備えた基本テンプレート?

回答:

回答№1は1

ここではあなたのために働くかもしれないオフキャンバスのナビゲーションバーの例を紹介します...

私が見つけたオフキャンバスの例のほとんどは、サイドバーをキャンバスから外しましたが、トップのナビゲーションバーは、通常の垂直方向のナビにまだ折りたたまれています。

ただし、この例では、より小さいデバイスではナビゲーションバーをスライディング右側のサイドバーに調整しています。

http://bootply.com/111223


回答№2の場合は0

また、Foundation(私は、ブートストラップと基礎フレームワークを数年間利用しています。大部分は、ニーズに応じて、他のプロジェクトよりも優れたものになります)。Foundationにはネイティブのオフキャンバスコンポーネントがあり、とてもうまく動作します左右のオフキャンバスは利用可能です!)

foundation.zurb.com/docs/components/offcanvas.html