mmenu7

横スライドしてくるメニューなのですが、なかなかの多機能です。まだダウンロードしてサンプルしか見ていませんが、とても重宝しそうな予感です。

モバイルメニューを実装する多機能 jQuery plugin『mmenu』

mmenu

『mmenu』の使い方

1. まずは、head内にダウンロードしたファイルを読み込みます。

2. 次にHTMLに記述

サブメニューがある場合は、デフォルトではサブメニューも横スライドします。

mmenu1

3. jQueryで要素指定し呼び出し

次に先ほどnav要素で指定したidをjQueryで要素指定し呼び出します。

以上で基本的な設定は完了です。

オプションと拡張機能

『mmenu』には様々なオプションと拡張機能が用意されています。
以下はそれぞれのリンクです。

メニューのスライド方向を変更する

この機能を利用するには、新たに「jquery.mmenu.positioning.css」を追加して読み込むます。

下からスライドしてくるようにするには、以下のように記述します。

メニューをタイル状に並べる

mmenu2

左のような図になります。
こちらも新たに「jquery.mmenu.tileview.css」を追加して読み込むます。

アイコンありにする

mmenu3

左のような図になります。
こちらも新たに「jquery.mmenu.iconbar.css」を追加して読み込むます。

サイドバーを横スライドさせない

mmenu4

横スライドではなくて、下にサブメニューが表示されるようになります。

この他に、テーマを変更するなどたくさんありますので、下記リンクより見てみてください。

実際にカスタマイズ

以下のリンクから、実際にオプションや拡張を設定するとページの最後にHTMLが生成されます。

WordPress plugin

この『mmenu』は、WordPress pluginとしても配布されています。
検索してみましたが表示されなかったので公式にはないようなので下記リンクよりダウンロードしてアップロードする手順になります。

mmenu6

まだまだ書ききれないほどの機能が満載です。
スマホメニューどうしようかなと思っておられるならこれは参考になること間違いなしだと思います。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る