*

Bootstrap の固定メニューがイマイチな件

公開日: : 最終更新日:2013/08/15 WEBDESIGN

スクリーンショット 2012-11-21 3.42.59
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


 
 

関連記事

Final Cut Pro X & MacBookPro15でテレビを外部モニターに

色々な噂が流れ出していますが、ちょっと気になったのはSONYのEマウントの新型。ターゲットがCANO

記事を読む

no image

URLセグメントを取得する

URIクラスのsegment()っていうクラスが便利なことを今日知ったのでメモ。 $this->ur

記事を読む

Bootstrap の新しいバージョン3がお試し公開中

Mobile first な Bootstrap 3 RC1 が出てる。RC版なので本格稼働には向か

記事を読む

やっと到着した NEEWER ショルダーサポートマウントリグ(追記)

とりあえず、何もないと何も出てこないということは人生何度か経験するわけでして。ショルダーリグ系を触っ

記事を読む

no image

CakePHPによる実践Webアプリケーションっていう

新しい本がでていたので購入してみた。 実際にグループウエアを作成しながら学べるようになっている。実践

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑