ウィンドウサイズに応じてli要素とselect要素を切り替えるレスポンシブなメニューを実装する軽量jQueryプラグイン・Responsive Menu

Ads

ウィンドウサイズに応じてli要素と
select要素にスイッチできるjQuery
プラグイン、Responsive Menuのメモ。
ブレークポイントを設定して、閲覧
するウィンドウサイズがそのポイント
に達したらli要素で作ったメニュー
をselectにしてコンパクト化します。

以前、CSS-Tricksでも記事になっていました(参照:Convert a Menu to a Dropdown for Small Screens)が、これと同じ機能です。孫要素までネストされたリストでもselectにスイッチできます。CSS-Tricksのもネスト対応してるかは調べていませんが・・

Responsive Menu


普通にPCで見ると左のようにリストに、スマフォのようなウィンドウサイズの狭いデバイスだとselectにスイッチしてコンパクトにしてくれます。これ便利ですよね。


select化されてもネストされた要素はスペースで明示されています。

まぁそれだけのシンプルなライブラリなんですが、レスポンシブ設計の際はドロップダウンメニューのような入れ子のli要素に対応する機会も多そうなのでこの手の方法も覚えておくといいかも。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobilemenu.js"></script>
<script>
  $(document).ready(function(){
      $('#foo').mobileMenu();
  });
</script>

これでliの親要素にid=”foo”を与える。

<ol id="foo">
  <li><a href="">list01</a></li>
  <li><a href="">list02</a></li>
  <li><a href="">list03</a>
    <ul>
      <li><a href="">list03-1</a></li>
      <li><a href="">list03-2</a></li>
      <li><a href="">list03-3</a>
        <ol>
          <li><a href="">list03-3-1</a></li>
          <li><a href="">list03-3-2</a></li>
        </ol>
      </li>
      <li><a href="">list03-4</a></li>
    </ul>
  </li>
  <li><a href="">list04</a></li>
  <li><a href="">list05</a></li
</ol>

ブレークポイントはライブラリ内を書き換えます。10行目くらい。

//plugin's default options
var settings = {
  switchWidth: 768,//ブレークポイント
  topOptionText: 'Select a page',//select要素での未選択テキスト
  indentString: '&nbsp;&nbsp;&nbsp;'//ネスト部分のインデントする部分
};

シンプルで手軽なので個人的には気に入ってます。

Responsive Menu