MDwikiのドロップダウンメニューにスクロールバーを表示させたい

MDwiki で調子よくサイトを作っていたのですが、ドロップダウンの項目が多くなりすぎて、メニューが画面に収まりきらなくなってしまいました。

そうなってしまうと、画面外に出てしまったメニューの項目を選択することができません。

でもスクロールバーは表示されないし、なんとかならんかなぁ？ と思って調べていたら、スクロールバーを表示する方法があるじゃないですか！

というわけで、早速導入です。

まずはスクロールバーを表示するのに必要な CSS を準備します。

.scrollable-menu { height: auto; max-height: 500px; overflow-x: hidden; }

これを mdwiki.html の <!-- END extlib/css/bootstrap-3.0.0.min.css --> の後ろあたり追加します。

次に、先程の CSS のクラスをドロップダウンメニューのクラスに追加します。

追加するコードはこんな感じで

,c.find("ul").addClass("scrollable-menu")

場所としては下のスクショの場所（ c.find("ul").addClass("dropdown-menu") の後ろ。手を加えていないソースだと199行目）になります。

これでドロップダウンメニューにスクロールバーが表示されるようになります。

しかも！ メニューが画面内に収まっている場合はメニューバーは表示されないという優れ仕様。

スバラシイ！

参照リンク

• BootstrapのDropdownメニューをスクロールさせる。 | 俺日記

【ご注意】
　上記の内容は v0.6.2 の mdwiki.html を対象としております。

【まとめページ】
　MDwiki 関連記事まとめ