【jQuery】スライド効果を持つシンプルなメニュー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>
 
Slide Menu

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

  • LATEST
  • RELATED
  • POPULAR