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

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

関連記事

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

【無料】商用利用OKシームレステクスチャ「安山岩(アンデサイト)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。安山岩(アンデサイト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2025.08.01シームレステクスチャ

【無料】商用利用OKシームレステクスチャ「岩石(白玉石風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。白玉石のような白色の石の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.12シームレステクスチャ

Hair Lounge Credo様WEBサイト制作

伊豆市小立野にリニューアルオープンした美容室Hair Lounge Credo(ヘアラウンジクレド)様のWEBサイトを制作いたしました。店舗のリニューアルあるに合わせてWEBサイトもリニューアル!店舗の空間デザインに合わせて、ウッドやレンガ調、蔦などのイメージをWEBサイ...続きを読む

2016.07.06WEBサイト制作美容室

【フォト】蓮華寺池公園フォトギャラリー≪冬≫

藤枝市のほぼ中央に位置し、「花・水・鳥・笑顔」がテーマの公園「蓮華寺池公園」。池を囲む公園は、桜や藤の花、蓮の花など季節を通して自然を楽しむことができる憩いの場所です。今回、紹介する冬の蓮華寺池公園の山頂周辺の写真です。自然のなかを歩いたり、眺めの良い見晴台があったり、広場やアス...続きを読む

2018.02.07フォトギャラリー藤枝