スマホ用のボタンに使えそう！クリックで変形するアローマーク（矢印）

Tweet

238

CSS3 Animated Toggles
By 2ne

See the Pen CSS3 Animated Toggles by 2ne (@2ne) on CodePen.

http://codepen.io/2ne/pen/kgaKx

クリックすることでアローマークが変形するアニメーションが付いたボタンです、動作にはjQueryが必要です。このボタンと連動する要素を作成して、jQueryの方で関連付けてやれば要素が展開するようなボタンにする事が出来ます

メニューの表示等に使えそうです

jQuery 動作を追加する例

arrow1.click(function() {
 arrow1.toggleClass("active");
 $("div.block").toggleClass("open")//追加した部分
});

arrow1がクリックされた時に<div class=”block”></div>といういうものがあった場合に openというクラスが追加されるようにしました。
離れている要素でも指定して動作を作る事ができます

Tweet

短縮URL:

2014年02月14日 WEB制作系 コード・プラグイン CodePen