サイト制作メモ

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

投稿日:2018年1月16日 更新日:

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu

あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。
オプションで色々設定もできるみたいなので、初心者から上級者まで使える便利なプラグインではないかな~と思います。

mmenuの使い方

まずは以下のサイトからcssとjsファイルをダウンロードします。

[mmenu]スマホ用メニューに便利なjQuery plugin

jQueryの読み込みも必要ですので、以下サイトよりダウンロードしてください。
jquery

私が使うファイルは2つ。
・jquery.mmenu.all.css
・jquery.mmenu.all.js

ファイルのダウンロードが終わったら、cssファイルとjsファイルをページに読み込みさせます。

先にjQueryを読み込んでからjquery.mmenu.all.jsの読み込みをして下さい。

順番が違うとうまく動きません。
■head内に記述</p

<link type="text/css" rel="stylesheet" href="/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.mmenu.all.js"></script>

ファイルの読み込みが終わったらスマホ用メニューを作成します。

■html

<nav id="menu">
  <ul>
    <li>menu</li>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
    <li><a href="#">メニュー5</a></li>
    <li>menu02
      <ul>
        <li><a href="#">メニュー02-1</a></li>
        <li><a href="#">メニュー02-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

メニューの作成が終わったらjsファイルにmmenu実行の命令をかきます。

基本の記述はこれだけ。
■jsファイル(base.jsでもmain.jsでも任意の名前をつけてこのファイルも読み込みます。)

$(document).ready(function() {
      $("#menu").mmenu({
*オプションはここに記述
         }
      });
   });

ページをアップして完了です。
動作確認して下さい。

- サイト制作メモ
-, , ,

関連記事

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...
no image

サイト制作に役立つTips_リンク集

角丸とシャドウのジェネレーター グラデーションジェネレーター css矢印ジェネレーター flexboxの使い方 【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた 【保 ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...
no image

cssで作るタイトルやテキストの装飾色々メモ

タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲気がつくれる。 ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意! HTMLは入れ子にしています。 ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する