クリックでアイコンを切り替える「jqMenuClick」

当ページのリンクには広告が含まれています。

jQuery Plugin » エフェクト » クリックでアイコンを切り替える「jqMenuClick」

クリックでアイコンを切り替えるプラグイン「jqMenuClick」を紹介します。

jQueryプラグイン「jqMenuClick」

このプラグインを使えば、クリックするたびにアイコンが切り替わる効果をサイトに付加することができます。

メニューや隠れている部分をクリックで拡げて、かつアイコンを切り替える場合に使えるかもしれません。

デモのアイコンをクリックしてみてください。

「jqMenuClick」のデモ

ソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="a2x text counterのデモでーす。">
<title>jqMenuClick - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jqMenuClick.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>jqMenuClickのデモでーす。</h1>
 
<h2 id="demo1">クリック → <span class="glyphicon glyphicon-flash" ></span></h2>
<h2 id="demo2">クリック → <span class="glyphicon glyphicon-chevron-down" ></span></h2>
 
<script>
$(document).ready(function(){ 
  $('#demo1').menuClick({
    menuExpandedClass:"glyphicon glyphicon-flash",
    menuCollapseClass:"glyphicon glyphicon-asterisk",
  });
  $('#demo2').menuClick({
    menuExpandedClass:"glyphicon glyphicon-chevron-up",
    menuCollapseClass:"glyphicon glyphicon-chevron-down",
  });
});
</script> 
</body>
</html>

jqMenuClick

jQueryプラグイン「jqMenuClick」

ソース（HTML + jQuery）

関連記事（一部広告含む）