スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

スバラシイ!

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

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

スポンサーリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサーリンク