jQuery

【jQuery】ホバーでメニューリンク部分がフリップするjQuery menuFlip

May 15, 2017
jQuery menuFlip

jQuery menuFlipはフリッピングメニューリンクを作成するための軽量なjQueryプラグイン。

HTML

<ul id="menuFlip">
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link1.html">Link 1</a></li>
</ul>

必要に応じて、メニュー項目に使用するテキストを指定することができます。

<li><a href="link1.html" data-flipped-text="Flipped Text">Link 1</a></li>

JS

$('#menuFlip').menuFlip({
    li_height       : '20px', 
    flip_speed      : 150, 
    flipped_class   : 'flipped_item', 
    mouseover       : function() {}, 
    mouseout        : function() {}
});