• かちびと.net

    ウィンドウサイズに応じてli要素とselect要素を切り替えるレスポンシブなメニューを実装する軽量jQueryプラグイン・Responsive Menuのご紹介。スマートフォンサイズでメニューをコンパクトに切り替えます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

ウィンドウサイズに応じて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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services