jQuery

【jQuery】スライド効果を持つシンプルなメニューSlide Menu

August 11, 2016
Slide Menu

Slide Menuはスライド効果を持ったシンプルなマルチレベルメニュー。

HTML

<nav class="slide-menu" id="my-menu">
    <ul>
        <li>
            <a href="#">Home</a>
            <ul>
                <li><a href="#">Submenu entry 1</a></li>
                <li><a href="#">Submenu entry 2</a></li>
                <li><a href="#">Submenu entry 3</a></li>
            </ul>
        </li>
        <li>
            <a href="/blog">Blog</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
    </ul>
</nav>

オプション

Option Default
position “right”
showBackLink true
submenuLinkBefore empty
submenuLinkAfter empty
backLinkBefore empty
backLinkAfter empty

Example

 $(document).ready(function () {
     var menu = $('#my-menu').slideMenu({
         showBackLink: false,
         submenuLinkAfter: ' <strong>*</strong>'
     });
 });

API

var menu = $('#my-menu').data('slideMenu');

menu.open();
menu.close();
$('#my-menu').data('slide-menu').toggle();

Methods

  1. toggle()
  2. open()
  3. close()
  4. back()

Control buttons

<a class="slide-menu-control" data-target="my-menu" data-action="open">Open</a>
<a class="slide-menu-control" data-target="my-menu" data-action="close">Close</a>