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

スマホ用のボタンに使えそう!クリックで変形するアローマーク(矢印)
このエントリーをはてなブックマークに追加
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 ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)