サイト制作メモ

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でも任意の名前をつけてこのファイルも読み込みます。)

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

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

関連記事

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

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

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

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

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

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

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 …

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml 一般的な入れ …

翻訳する