jQuery

jQuery プラグイン ポップアップメニューが実装できる jQueryPopMenu使い方

jquery-pop-menu

超簡単にポップアップメニューが実装出来るjQueryプラグイン【jQueryPopMenu】の使い方をご紹介したいと思います。
実装がとても簡単で、すぐに実装できますし、レスポンシブやスマホのポップアップメニューなどにも利用できると思います。
デモページも有りますので是非ご参考下さい。

デモページ

必要なファイル等は、下記リンク先よりダウンロードをお願い致します。

jQueryPopMenu

ポップアップメニュー実装方法

それでは、jQueryプラグイン【jQueryPopMenu】を使ってポップアップメニューを実装していきたいと思います。
実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。

必要ファイルの読み込み

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

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.popmenu.js"></script>

HTMLの準備

次にポップメニューのトリガーやポップアップメニューのHTMLを記載していきます。
クラスpop_ctrlがポップアップメニューのトリガースイッチとなります。
こちらをクリックすればポップアップメニューが表示させるようになっていますので必ずこのクラス名を記載して下さい。

	<div class="popmenu-box">
    	<span class="pop_ctrl icon-menu"></span>
        <ul id="popmenu">
                <li>ホーム</li>
                <li>投稿</li>
                <li>ログイン</li>
                <li>新着</li>
                <li>画像</li>
                <li>メール</li>
                <li>Facebook</li>
                <li>Twitter</li>
                <li>設定</li>
            </ul>
    	</div>

Scriptの挿入

上記HTMLコードでポップアップメニューの全体を囲っているクラス名またはID名を指定します。

    <script>
        $(function(){
            $('.popmenu-box').popmenu();
    </script>

上記コードまでを記載すれば基本的な実装が完了となります。
CSSやアイコンフォントなどを追加していけばすぐにオリジナルのポップアップメニューが出来上がります。
とても簡単に実装出来ますので、ちょっとしたメニューのスペース確保やスマホサイトのメニューにちょうどいいのではないかと思います。
デモページもご用意していますので、ご参考下さい。

デモページ

オプションの解説

【jQueryPopMenu】では、ちょっとしたオプションも有りますのでそちらも少しご紹介したいと思います。

    <script>
        $(function(){
			$('#popmenu-box').popmenu({
			    'width': '300px',         // ポップアップメニューの幅
			    'background': '#34495e',  // ポップアップメニューの背景色
			    'focusColor': '#1abc9c',  // ポップアップメニューのホバー時の背景色
			    'borderRadius': '10px',   // 角丸
			    'top': '50',              // メニュートップの位置
			    'left': '0',              // メニュー左の位置
			    'iconSize': '100px'       // メニューのボタンサイズ
			});
        })
    </script>

メニューの背景・幅やホバー時の背景色などが変更可能となっております。

デモページ

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

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

About

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

関連記事

コメント

コメントをどうぞ

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

PREVIOUS Home_VS09pitotop

HUNTER×HUNTER バトルオールスターズ VS ネフェルピトー(上級)を攻略したパーティメンバー

NEXT urbanic

【無料】ビジネスサイトに使えるフラットデザイン HTMLテンプレート