【jQuery】横幅に入りきらないリストをプルダウンメニューにするFlex Pulldown.jsの使い方

なかなか文章で説明するのが難しいですが、
全てのメニューリストをプルダウンにするのではなく、幅に入りきらない分をプルダウンにするjQueryプラグインの紹介です。

本サイトがデモになっているので見た方が早いと思います。
サイトのウィンドウサイズを小さくしたり、大きくしたりしてみてください。

Flex Pulldown

colissで紹介されてた2015年のjQuery総まとめ記事で、
プラグインではないですが、新しい動きの提案として紹介されてました。

2015年総まとめ、jQueryのプラグインとスクリプト100選

ダウンロード

公式サイトの「Download zip」ボタンからファイル一式をダウンロードできます。

Flex Pulldown

>読み込み

ダウンロードしたファイルの「dist」フォルダ内にあるCSSとJavaScriptファイルを読み込みます。

<link rel="stylesheet" href="css/flex-pulldown.min.css">
<script src="js/flex-pulldown.min.js"></script>

HTMLの記述

HTMLのメニューの構造とclass名をを以下のようにします。

<nav class="sample">
  <ul class="flex-pulldown-menu">
    <!-- list -->
    <li>list1</li>
    <li>list2</li>
    <!-- pulldown  -->
    <li class="flex-pulldown-more">
      <button></button>
      <ul class="flex-pulldown-add-menu"></ul>
    </li>
  </ul>
</nav>

jQueryの読み出しは「sample」というclass名が当てられるところでやります。（class名はsampleでなくても大丈夫です）

「.flex-pulldown-menu」の外に見出しなどの要素があっても大丈夫です。

jQueryの記述

jQueryは以下を書くだけで大丈夫です。

$(document).ready(function() {
  $('.sample').fxpulldown();
});

オプション

オプションもいくつか用意されています。

$(document).ready(function() {
  $('.sample').fxpulldown({
    // プルダウンリスト内にあるメニューの数を表示するかどうか
    showNum: true,
    // trueにすると「breakwidth」で設定した数字以下では、
    // すべてプルダウンリストになります。
    sp: true,
    // 「sp」オプションのブレイクポイントの設定です。
    breakwidth: 420
  });
});

さいごに

簡単に実装できて、colissでも紹介されてたように新しい動きを実現できるのはいいですね。

まだリリースされたばかりなので、今後のバージョンアップに期待です。

こちらの記事もどうぞ

Pocket

Snaplog