【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】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー

【デザイン】無料でダウンロードができるベクター素材サイトまとめ

WEBサイトやデザイン制作において、ベクター素材は加工もし易くロゴやアイコンいろんな場面で活躍します。そんなベクター素材が無料でダウンロードできるサイトをまとめてみました。 Vector Stock ユーザー登録が必要ですが、有料から無料のロイヤリティーフリーの素材が...続きを読む

2015.02.14インスピレーション

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

藤枝おんぱく2019「No.31 出世城‼田中城に秘められた パワースポットすまいるウォーキング!」

5月12日に開催された藤枝おんぱく2019のプログラム、No31.出世城‼田中城に秘められた パワースポットすまいるウォーキング!に行ってきました。 藤枝に住んで30余年、身近なところに住んでいても知らなかった田中城の周辺を巡るウィーキングです! 今回巡...続きを読む

2019.05.30フォトギャラリー藤枝