Bootstrap の固定メニューがイマイチな件
公開日：
:
最終更新日：2013/08/15
WEBDESIGN
Bootstrapの公式ページでは左のメニューがスクロールしてもいつも同じ位置にある。とっても素敵なので真似してみたけど苦労した件。
2.1.1 bootstrap affix というキーワードにたどり着くまでに数分。その後色々試しながら設定したけど、どうにもうまくいきません。やっとの思いでたどり着いたのは
Bootstrapにjkスムーズスクロールをちょい足し
http://n.blueblack.net/articles/2012-09-17_01_bootstrap_jk_smooth_scroll/
このページに記載されている手順で、とりあえず目的は達成できました。感謝感激です。
一応メモしておきます。
<body data-spy=”scroll” data-target=”.bs-docs-sidebar”>
<div class=”span3 bs-docs-sidebar”>
<ul class=”nav nav-tabs nav-stacked bs-docs-sidenav” data-spy=”affix” data-offset-top=”340″>
.bs-docs-sidenav {
width:220px;
}
.bs-docs-sidenav.affix {
top: 20px;
}
と思ったら問題が….
同ページ最下段にも書いてあるように、レスポンシブに対応していません。画面の幅が小さくなると、本文にメニューが重なってしまいます。
とっても残念。何か良い方法がないか検索中ですが見つかりません(T_T)
Amazonタイムセールがお薦めです。激安商品がいっぱい。毎日チェックだ！
Sponsored Link
関連記事
-
-
Dreamweaverの代わりになるのか？HTML5 CSS3対応HTMLエディターBlueGriffonを試す
特にFTPわまりで不具合の多い Adobe Dreamweaver の代替えソフトとなるのか？「Bl
-
-
マンフロット カーボンファイバー三脚 504HD-535K 開封の儀（２）
それでは開封の後編。気になる点を確認しながら細かく見て行きましょう。と、その前に業務連絡ですが、河野
-
-
DaVinci Resolve に Neat Video V4 Demo を入れてみる【Windows 10】
そういえば当初の目的であったIR pollution ですが、なんか？？？ 直射日光とかじゃないと出
-
-
SONY HDR-CX630Vで検証する価格.comで最安値を感じ取るマイルール
60,000円切ったら購入しようと思っているSONYハンディカムHDR CX630V。目前にしてなか
-
-
SONY α6300のファンクションボタンをカスタマイズして使いやすく
α7sIIを推しまくっている動画を紹介したのですが、その中で、ちょっと参考になる部分として、ボタン関
- PREV
- FuelPHPのViewModelで表示用データを加工
- NEXT
- すごい逆張りEAを作ってみる
ご質問は掲示板へお願いいたします。