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

jQuery

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',
    });