今日の人気記事

まだデータがありません。

アプリのようにスライドするレスポンシブメニュー「mmenu」

当ページのリンクには広告が含まれています。

スポンサーリンク

アプリのようにスライドするレスポンシブメニューを実装する「Aperture」を紹介します。

jQueryプラグイン「mmenu」

レスポンシブメニューを作成するプラグインです。ブラウザの幅が指定したサイズより大きい場合は、メニューはサイドに配置され、ブラウザの幅を小さい場合には、「☰」という記号にメニューは格納されます。

「☰」をクリックするとアプリのようにスライドしながらメニューが表示されます。レスポンシブメニューを作成したい場合、ひとつの候補になるプラグインです。おすすめ！

スポンサーリンク

デモページのブラウザの幅を縮めてみてください。「☰」という記号が表示されるので、クリックしてみてください。

「mmenu」のデモ

デモのソース（HTML + jQuery）

ソースを表示
印刷SyntaxHighlighterについて
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>mmenu - jQueryまとめのカルマ</title>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link type="text/css" rel="stylesheet" href="css/extensions/jquery.mmenu.widescreen.css" media="all and (min-width: 900px)" />
<link type="text/css" rel="stylesheet" href="css/extensions/jquery.mmenu.themes.css" media="all and (min-width: 900px)" />
<style type="text/css">
@media all and (min-width: 900px) {
  html, body {
    height: 100%;
  }
  #menu {
    background: #eee;
  }
  #page {
    border-left: 1px solid #ccc;
    min-height: 100%;
  }
  /* hide open-button */
  a[href="#menu"] {
    display: none !important;
  }
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.js"></script>
<script type="text/javascript">
$(function() {
  $('nav#menu').mmenu({
    classes: 'mm-light'
  });
});
</script>
</head>
<body>
<div id="page">
<div id="header">
<a href="#menu"></a>
mmenuのデモでーす。
</div>
<div id="content">
<p>ブラウザの幅を縮めてみてください。</p>
<p>あああああああああああああああああああああああああああああああ</p>
</div>
 
<nav id="menu">
<ul>
<li class="Selected"><a href="#">めにゅー①</a></li>
<li><a href="#">めにゅー②</a></li>
<li><a href="#">めにゅー③</a></li>
<li><a href="#">めにゅー④</a></li>
<li><a href="#">めにゅー⑤</a></li>
</ul>
</nav>
</div>
</body>
</html>

jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。
» mmenu

スポンサーリンク

関連記事（一部広告含む）