このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/meanmenu.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.meanmenu.min.js"></script>
<script>
	$(window).load(function(){
		$('#MeanMenuBtn01').on('click', function(){
			$('#MeanMenuDemo').fadeIn(function(){
				$('#MeanMenuDemo .inner').meanmenu({
					meanMenuContainer: '#MeanMenuDemo'
				});
			});
		});
		$('#MeanMenuBtn02').on('click', function(){
			$('#MeanMenuDemo').fadeOut();
			$('.mean-bar').remove();
			$(window).off('resize').off('orientationchange');
		});
	});
</script>
<button class="blue" id="MeanMenuBtn01">MeanMenuしてみる</button>
<div id="MeanMenuDemo">
	<div class="inner">
		<ul>
			<li><a href="#">リンク1</a>
				<ul>
					<li><a href="#">リンク1-1</a>
						<ul>
							<li><a href="#">リンク1-1-1</a></li>
							<li><a href="#">リンク1-1-2</a></li>
							<li><a href="#">リンク1-1-3</a>
								<ul>
									<li><a href="#">リンク1-1-3-1</a></li>
									<li><a href="#">リンク1-1-3-2</a></li>
									<li><a href="#">リンク1-1-3-3</a>
										<ul>
											<li><a href="#">リンク1-1-3-3-1</a></li>
											<li><a href="#">リンク1-1-3-3-2</a></li>
											<li><a href="#">リンク1-1-3-3-3</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">リンク1-2</a></li>
					<li><a href="#">リンク1-3</a></li>
				</ul>
			</li>
			<li><a href="#">リンク2</a></li>
			<li><a href="#">リンク3</a></li>
			<li><a href="#">リンク4</a></li>
		</ul>
	</div>
	<p class="title">ウィンドウサイズを小さくしてみてね!</p>
	<button class="yellow" id="MeanMenuBtn02">MeanMenuやめてみる</button>
</div>

MeanMenuについて

MeanMenuは、レスポンシブメニューを簡単に設置できるプラグインです。
ブレークポイント等色々と細かい設定もできるようになっています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL v3
対応ブラウザ

関連するjQueryプラグイン

  • WheelMenu

    WheelMenu

    マウスオーバーした要素を中心にメニューが円状に配置されるプラグイン

  • PageSlide

    PageSlide

    横からゴゴゴゴと出てくるサイドメニューを設置できる

  • Multilevelpushmenu

    Multilevelpushmenu

    横から重なるようにメニューが出てくる

  • Tabber

    Tabber

    タブメニューを簡単に設置できる

  • ContextMenu2

    ContextMenu2

    右クリックのメニューをオリジナルなものに変更できる