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

jQuery

snakemenu

March 21, 2018

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

Latest Posts

Related Posts