サイト制作メモ

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の取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url(‘画像を指定’); background-size:cover; でできますが、 いやいや、一画面だけでなくそ …

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け …

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

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

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、 CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かって …