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

SnakeMenu.jsは素敵なアニメーションのホバーメニューを作るためのjQueryプラグイン。
マークアップ
<script src="filespath/jquery-3.2.1.min.js"></script> <script src="filespath/snakeMenu-1.1.min.js"></script>
メニュー項目(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', });
Classes
MIT