jQuery

【jQuery】素晴らしいアニメーションメニューを作成するためのプラグインSnakeMenu.js

March 21, 2018
snakemenu

SnakeMenu.jsは素敵なアニメーションのホバーメニューを作るためのjQueryプラグイン。

Static HTML

マークアップ

<script src="filespath/jquery-3.2.1.min.js"></script> 
<script src="filespath/snakeMenu-1.1.min.js"></script>

Usage

メニュー項目(div、a、img、span、liなど)をコンテナ要素(div、ulなど)で囲みます。

    <ul class="snakeMenu">
      <li class="snakeMenuItem" data-menuitem="1"><a href="#home">Home</a></li>
      <li class="snakeMenuItem" data-menuitem="2"><a href="#about">About</a></li>
      <li class="snakeMenuItem" data-menuitem="3"><a href="#contact">Contact</a></li>
    </ul>

box要素と同じ

    <div class="snakeBox">
      <div class="snakeBoxItem" data-boxitem="1">
        Content-1
      </div>
      <div class="snakeBoxItem" data-boxitem="2">
        Content-2
      </div>
      <div class="snakeBoxItem" data-boxitem="3">
        Content-3
      </div>
    </div>

デフォルトクラスを使用するかプラグイン関数を呼び出し、要素のCSSクラスを設定。

    $('.snakeMenu').snakeMenu({
      menuCont: '.snakeMenu',
      menuItem: '.snakeMenuItem',
      menuItemData: 'menuitem',
      boxCont: '.snakeBox',
      boxItem: '.snakeBoxItem',
      boxItemData: 'boxitem',
    });

Documentation

Classes

  1. menuCont
  2. menuItem
  3. menuItemData
  4. boxCont
  5. boxItem
  6. boxItemData
  7. cssMenuItemActive
  8. noActiveMenuItem

Options

  1. destroySnakeRes
  2. mouseDelay
  3. boxOffsetTop
  4. boxOffsetBottom
  5. boxOffsetLeft
  6. boxOffsetRight
  7. animOpen
  8. animOpen

MIT