サイト制作メモ

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

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

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

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

mmenuの使い方

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

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

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

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

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

先にjQueryを読み込んでからjquery.mmenu.all.jsの読み込みをして下さい。
順番が違うとうまく動きません。

■head内に記述

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

■html

4.メニューの作成が終わったらjsファイルにmmenu実行の命令をかきます。
基本の記述はこれだけ。

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

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

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

関連記事

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 無限ループスライダー で、ここからcss …

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。 例えば、このサイトのレイアウト。 クロームで見るとこんな感じ まぁまぁ均等に並んでいるよ …

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ …

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか? 私は結構あります。 で、ジ …

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

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