2014/10/28

【jQuery】開閉式メニューをカンタンに実装!!『Tendina』の使い方

【jQuery】開閉式メニューをカンタンに実装!!『Tendina』の使い方

Webページのサイドメニューなどによく用いられる開閉式のメニューをカンタンに実装できるjQeryプラグイン『Tendina』の使い方を紹介します.

目次

入手方法

https://iprignano.github.io/tendina/にアクセスし,ページ上部にある『DOWNLOAD』をクリックします.

設置方法

ダウンロードしたファイルを解凍して出来たフォルダ内にあるプラグインのファイルとCSSファイルをjQuery本体とともに読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="tendina.min.js"></script>
<link rel="stylesheet" href="demo.css">

次に,メニューを以下のようにリスト要素で作成します.

<ul class="dropdown">
  <li><a href="#">親メニュー1</a>
    <ul>
      <li><a href="#">子メニュー1-1</a>
        <ul>
          <li><a href="#" class="active">孫メニュー1-1-1</a></li>
        </ul></li>
      <li><a href="#">子メニュー1-2</a>
        <ul>
          <li><a href="#">孫メニュー1-2-1</a></li>
        </ul></li>
    </ul></li>
  <li><a href="#">親メニュー2</a>
    <ul>
      <li><a href="#">子メニュー2-1</a>
        <ul>
          <li><a href="#">孫メニュ2ー1-1</a></li>
        </ul></li>
    </ul>
</ul>

次に,JavaScriptを記述して実行します.

$('.dropdown').tendina();

これだけで,開閉式のメニューを実行することが出来ます.

また,マウスオーバーでの開閉や,デフォルトで開いておきたい項目がある場合には,以下のようにオプションを指定して実行します.

$('.dropdown').tendina({
  //マウスオーバーでメニューを開閉
  onHover : true,
  //マウスオーバー時にメニューを開くまでの時間(ms)
  hoverDelay : 300,
  //最初に開いておきたいメニューの指定
  activeMenu:".active"
});

サンプル

実行サンプルは,ファイルをダウンロードしたサイト(https://iprignano.github.io/tendina/)にあります.

まとめ

実際の動作はこんなにカンタンに実装したとは思えないほどしっかりした動きをしてくれます.

デザインに関しては少しシンプルな印象もあるので,手を加えて実装してみてはいかがでしょうか.