jQuery 2014-07-26

スマホサイト制作に役立つ スライドメニュー 【mmenu】使い方 jQueryプラグイン

mmenu

今回は、スマホサイト制作時に役に立つスライドメニューを実装出来るjQueryプラグイン【mmenu】の使い方のご紹介です。
どんなスライドメニューかといいますと、指定したメニューが左右からスライドして表示されるメニューを実装出来ます。
gmailのアプリをインストールされている方はピンと来るかもしれません。
利用も簡単に実装出来ますし、オススメしたいポイントが指定したナビ要素を自動的にCSSでスタイルしてくれます。
さらにメニューのサブメニューも自動でドロップダウンのようなスタイルも実装してくれます。
また、指定のCSSを読み込みオプションを指定すればナビのスタイルのテーマも変更が可能となってます。
上記の用にこちらのjQueryプラグインは、特定のCSSを読み込みオプションを指定すれば、エフェクトの追加やスタイルのテーマの追加が出来ます。
デモサイトも下記にご用意しておりますので、ご参考下さい。

デモページ

ファイルのダウンロードは下記リンク先よりお願い致します。

【mmenu】ダウンロード

mmenu-1

【mmenu】使い方

利用方法は、下記リンク先にも【チュートリアル】として記載してありますのでご参考下さい。

チュートリアル

必要ファイルの読み込み

まずは、head内にjQuery本体とダウンロードしたファイルの中にあるスクリプトとスタイルシートを読み込みます。
ファイルの階層などは、ご自身に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.mmenu.min.js" type="text/javascript"></script>
<link href="css/jquery.mmenu.css" type="text/css" rel="stylesheet" />

HTML

次にHTMLの準備をしていきたいと思います。
nav要素の部分がスライドメニューとなります。jQueryで呼び出す為にnav要素にはidを付与します。
また、メニューを呼び出すボタン等は、a要素にnav要素で指定したidを記載します。
下記のコードでは、header内のa要素のMENU-OPEMがその要素になっています。

<div id="wrap">
    <header id="header">
    	<a href="#my-menu">MENU-OPEN</a>
    </header>
    <div id="content">
    	・・・
    </div>
    <footer id="footer">
    	・・・
    </footer>
    <nav id="my-menu">
    	<ul>
    		<li><a href="">メニュー1</a></li>
    		<li><a href="">メニュー2</a>
              <ul>
				<li><a href="#about/team/management">Management</a>
              		<ul>
						<li><a href="#about/team/management">Management</a></li>
						<li><a href="#about/team/sales">Sales</a></li>
						<li><a href="#about/team/development">Development</a></li>
					</ul>
                 </li>
				 <li><a href="#about/team/sales">Sales</a></li>
				 <li><a href="#about/team/development">Development</a></li>
				</ul>
            </li>
    		<li><a href="">メニュー3</a></li>
    		<li><a href="">メニュー4</a></li>
    		<li><a href="">メニュー5</a></li>
    	</ul>
    </nav>
</div>

指定した要素のメニューは自動でCSS側でスタイルしてくれますし、サブメニューもスタイルしてくれますのでとても制作の短縮になりますね。

menu sub-menu

jQuery

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

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();
   });
</script>

上記までのコードを記載すれば、実装完了となります。
注意してもらいたいのが、body要素をcssで背景色を指定しないと動きがおかしくなる場合がありますので、スライドの動きがおかしくなった場合は、背景色が指定されているか確認しましょう。
また、デモサイトもありますのでご参考下さい。

デモページ

拡張機能

ここでは、少し役に立ちそうな拡張機能をご紹介したいと思います。
【mmenu】では様々なオプション・拡張機能がありますが、機能によっては特定のJSやCSSを読み込み必要性がありますのでご注意下さい。
下記リンク先にも記載してあります。

オプション

拡張機能

メニューを右や下からスライドさせる

デフォルトでは、メニューをオープンすると左からスライド表示されるのですが、右や下からも表示させることも出来ます。
こちらの機能を利用する場合は、【jquery.mmenu.positioning.css】を新しくhead要素内に読み込む必要があります。

<link href="css/jquery.mmenu.positioning.css" type="text/css" rel="stylesheet" />
↑上記CSSを新しく読み込む。ファイルの階層などはご自身の環境に合わせて下さい↑
</head>

<script type="text/javascript">
//JavaScriptの記載
   $(document).ready(function() {
      $("#my-menu").mmenu({
  		offCanvas: {
        	        position  : "right", //left(デフォルト)・right・top・bottom
			zposition : "front" //back(デフォルト)・front・next   
            		}
});
   });
</script>

サブメニューの切り替えエフェクト変更

こちらは、サブメニューを切替時のエフェクトの変更です。
デフォルトでは【true】となります。

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         slidingSubmenus: false//デフォルトではtrueでスライドでの切り替え
      });
   });
</script>

テーマの変更

こちらは、スライドメニューのテーマの変更となります。
こちらの拡張機能利用する場合は、【jquery.mmenu.themes.css】を読み込む必要があります。
利用できるテーマ下記があります。

  • デフォルト
  • mm-light
  • mm-black
  • mm-white
<link href="path/to/jquery.mmenu.themes.css" type="text/css" rel="stylesheet" />
↑上記CSSを新しく読み込む。ファイルの階層などはご自身の環境に合わせて下さい↑
</head>

   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
             //下記に指定のテーマを記載する
            classes: "mm-light"
         });
      });
   </script>

まだまだこの他にも、スライド動作時のエフェクトの変更やデフォルトでは、左からスライドされてメニューが表示されますが、右や下から変更も出来ます。
その他、オプション・拡張機能は、下記リンク先よりご確認下さい。

オプション

拡張機能

デモページ

オススメ書籍・アイテム

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS free-arrow-csh

PhotoShop 矢印やカーソルのフリー カスタムシェイプ

NEXT bibi

PhotoShop ブラシ グランジテイストなどに合いそうな 【壁のひび割れ】