このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.multilevelpushmenu.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.multilevelpushmenu.min.js"></script>
<script>
	$(window).load(function(){
		$('#MultilevelpushmenuDemo').multilevelpushmenu();
	});
</script>

//オプション一覧
container: $( '#menu' ),                                   // Holding container.
containersToPush: [ $( '#content1' ), $( '#content2' ) ],  // Array of DOM elements to push/slide together with menu.
collapsed: false,                                          // Initialize menu in collapsed/expanded mode
menuID: 'multilevelpushmenu',                              // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper',                // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive',          // CSS class for inactive wrappers.
menu: arrMenu,                                             // JS array of menu items (if markup not provided).
menuWidth: 0,                                              // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0,                                             // Menu height (integer, '%', 'px', 'em').
backText: 'Back',                                          // Text for 'Back' menu item.
backItemClass: 'backItemClass',                            // CSS class for back menu item.
backItemIcon: 'fa fa-angle-right',                         // FontAvesome icon used for back menu item.
groupIcon: 'fa fa-angle-left',                             // FontAvesome icon used for menu items contaning sub-items.
mode: 'overlap',                                           // Menu sliding mode: overlap/cover.
overlapWidth: 40,                                          // Width in px of menu wrappers overlap
preventItemClick: true,                                    // set to false if you do not need event callback functionality
preventGroupItemClick: true,                               // set to false if you do not need event callback functionality
direction: 'ltr',                                          // set to 'rtl' for reverse sliding direction
fullCollapse: false,                                       // set to true to fully hide base level holder when collapsed
swipe: 'both'                                              // or 'touchscreen', or 'desktop'
<button class="green" id="MultilevelpushmenuBtn">メニューを非表示にする</button>

<div id="MultilevelpushmenuDemo">
  <nav>
	  <h2 class="top"><i class="fa fa-reorder"><img src="<PATH>/icon.png" alt=""></i>MHP2G</h2>
    <ul>
        <li>
            <a href="#">飛竜種</a>
            <h2 class="top">飛竜種</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>リオレイア</a>
                    <h2 class="top"><i class="fa fa-phone"></i>リオレイア</h2>
                    <ul>
                        <li>
                            <a href="#">リオレイア亜種(桜)</a>
                        </li>
                        <li>
                            <a href="#">リオレイア希少種(金)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">リオレウス</a>
                    <h2 class="top">リオレウス</h2>
                    <ul>
                        <li>
                            <a href="#">リオレウス亜種(蒼)</a>
                        </li>
                        <li>
                            <a href="#">リオレウス希少種(銀)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">ディアブロス</a>
                    <h2 class="top">ディアブロス</h2>
                    <ul>
                        <li>
                            <a href="#">ディアブロス亜種(黒)</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">牙獣種</a>
            <h2 class="top">牙獣種</h2>
            <ul>
                <li>
                    <a href="#">ドスファンゴ</a>
                </li>
                <li>
                    <a href="#">ババコンガ</a>
                    <h2 class="top">ババコンガ</h2>
                    <ul>
                        <li>
                            <a href="#">ババコンガ亜種(緑)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">ドドブランゴ</a>
                    <h2 class="top">ドドブランゴ</h2>
                    <ul>
                        <li>
                            <a href="#">ドドブランゴ亜種(茶)	</a>
                        </li>
                    </ul>
                </li>
				<li>
                    <a href="#">ラージャン</a>
                    <h2 class="top">ラージャン</h2>
                    <ul>
                        <li>
                            <a href="#">ラージャン(激昂)</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">鳥竜種</a>
            <h2 class="top">鳥竜種</h2>
            <ul>
                <li>
                    <a href="#">ドスギアノス</a>
                    <h2 class="top">ドスギアノス</h2>
                    <ul>
                        <li>
                            <a href="#">ドスランポス</a>
                            <h2 class="top">ドスランポス</h2>
							<ul>
								<li>
									<a href="#">ドスゲネポス</a>
									<h2 class="top">ドスゲネポス</h2>
									<ul>
										<li>
											<a href="#">ドスイーオス</a>
										</li>
									</ul>
								</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
					<a href="#">イャンクック</a>
					<h2 class="top">イャンクック</h2>
					<ul>
						<li>
							<a href="#">イャンクック亜種(青)</a>
						</li>
                    </ul>
                </li>
                <li>
					<a href="#">ゲリョス</a>
					<h2 class="top">ゲリョス</h2>
					<ul>
						<li>
							<a href="#">ゲリョス亜種(紫)</a>
						</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">古龍種</a>
            <h2 class="top">古龍種</h2>
            <ul>
				<li>
                    <a href="#">キリン</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>クシャルダオラ</a>
                    <h2 class="top"><i class="fa fa-phone"></i>クシャルダオラ</h2>
                    <ul>
                        <li>
                            <a href="#">クシャルダオラ(錆)</a>
                        </li>
                    </ul>
                </li>
				<li>
                    <a href="#">ナナ・テスカトリ</a>
                </li>
				<li>
                    <a href="#">ラオシャンロン</a>
                </li>
            </ul>
        </li>
    </ul>
  </nav>
</div>

Multilevelpushmenuについて

Multilevelpushmenuは、横から重なるようにメニューが出てくるありそうでなかったプラグインです。
多階層になっているメニューの表示の仕方がありそうでなかった感じです。
アコーディオンに飽きたあなたのためのプラグインです。ぜひ一度お試しを!
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • ContextMenu2

    ContextMenu2

    右クリックのメニューをオリジナルなものに変更できる

  • Sidr

    Sidr

    横からニュイっと出てくるサイドメニューをお手軽に設置できる

  • FlexibleSlideToTopAccordion

    FlexibleSlideToTopAccordion

    自動で頭出しをしてくれるアコーディオンメニュー

  • Tabber

    Tabber

    タブメニューを簡単に設置できる

  • ContextMenu1

    ContextMenu1

    右クリックメニューをオリジナルにすることができるプラグインです。