今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. テキスト・画像・iframeなどに対応したLightbox「Featherlight」
  3. テーブルにページャーを「PaginateMyTable」
  4. イベントを表示するカレンダーを実装「kalendar」
  5. 複数のpdfファイルをWebサイトに「pdfSlider」 - jQueryプラグイン

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

スポンサーリンク

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

jQueryプラグイン「mmenu」

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

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

スポンサーリンク

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

「mmenu」のデモ

デモのソース(HTML + jQuery)


<!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

スポンサーリンク

関連記事(一部広告含む)