【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

responsive-slidemenu-javescript-mmenu

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。

『mmenu』

mmenu

ダウンロード

ライブラリのダウンロードはこちらから行うことが出来ます。

Step 1: スタイルシート・ライブラリの読込み

最初に『mmenu』の基本スタイルシートを読み込みます。続けて『mmenu』は「jQuery」対応のライブラリなので最初に「jQuery」を読込み、「jquery.mmenu.js」を読み込みます。

<link type="text/css" rel="stylesheet" media="all" href="mmenu.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>

Step 2: 初期設定

対応させるメニューとオプションを設定します。

<script type="text/javascript">
  $(function() {
    $("#my-menu").mmenu({
     // options object
    }, {
     // configuration object
     pageNodetype: "section"
});
  });
</script>

Step 3: ページ表示

基本的なメニューのコーディング例です。

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

オプションについての内容はこちらに説明があります。

関連記事

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

美容室グランディール様ロゴ制作

富士宮市にある『美容室グランディール』様のロゴを制作いたしました。 お店のお名前である「grandir(グランディール)」はフランス語で「成長する・育つ・大きくなる」という意味を持つことから芽が育つ、そしてお客様から愛されるお店をなることをイメージしてハートをモチーフに...続きを読む

2015.02.06ロゴ制作美容室

森のなかま藤枝様WEBサイトの制作

ペレットストーブ・木質燃料の販売の「森のなかま藤枝」様のWEBサイトの制作いたしました。 ペレットショップ「森のなかま」は、2002年から地域の環境や自然、森林、エネルギーに関わる仲間があつまり活動してきた「静岡森林エネルギー研究会」の店舗として2015年に浜松市天竜区に開...続きを読む

2018.11.30WEBサイト制作