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

PR

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というクラスが追加されるようにしました。
離れている要素でも指定して動作を作る事ができます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー