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

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

関連記事

【HTML】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2018.09.22BootstrapHTMLコーディング

【無料】商用利用OKシームレステクスチャ「木目(ヒノキ風)」素材

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

2018.09.11シームレステクスチャ

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング

【JavaScript】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress