問題 × 解決策

CSSとjQueryで、プラス(+)とマイナス(-)が切り替わるアイコンの作り方

問題

プラスとマイナスが切り替わるアイコンを作りたい

解決策

css3とjQueryを連携し、クラスで管理する

 

タップすることでプラスとマイナスに切り替わるアイコンの実装

アコーディオンでよく見かける、プラスマークとマイナスマークが切り替わるアイコンの作り方をご紹介します。

  • css3、jQueryを使います。

HTMLの構築

まずHTMLのコード例です。

<ul class=“menu-icon clearfix">
	<li class=“accordion">
		<a href="#"></a>
	</li>
</ul>

CSSの構築

アイコンの枠の構築

アイコンの枠の構築を行います。
liタグに幅、高さを設定し、aタグにdisplay: block; を設定します。

  • この例では、aタグにposition: relative; を設定する必要があります。
.menu-icon .accordion {
	width: 30px;
	height: 30px;
	margin: 0;
}
.menu-icon .accordion a {
	display: block;
	height: 30px;
	text-align: center;
	line-height:0; 
	position: relative;
}

プラスアイコンの構築

プラスアイコンの構築を行います。
aタグ内の疑似要素「before」を使い、プラスアイコンの縦棒を作成します。
Position: absolute; から位置を設定し、プラスアイコンの縦棒を、幅30pxと高さ2pxで構築し、 rotate(90deg)で縦にして背景色を設定します。

    • マイナスマークへの変化の動きを出したいため、transition: .2s; を設定しています。
    • あえて横棒からrotate()で縦にしているのは、マイナスアイコン時に横棒として活用するためです。
.menu-icon .accordion a:before{
	display: block;
	content: "";
	position: absolute;
	top:0; 
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	width: 30px;
	height: 2px;
	background-color: #40180A;
	transition: .2s;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

次にプラスアイコンの横棒を実現するため、疑似要素のafterを使用します。
beforeと同じ設定にします。

  • アイコンの変化の動きを出したいため、transition: .3s; を設定しています。
.menu-icon .accordion a:after{
	display: block;
	content: "";
	position: absolute;
	top: 0; 
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 30px;
	height: 2px; 
	background-color: #40180A;
	transition: .3s;
}

マイナスアイコン時の構築

プラスアイコンがマイナスアイコンとなる条件として、「aタグに”on”クラスが設定されている時」とします。
aタグに「 on 」クラスの付いている時、疑似要素「before」は縦向きから横向きへと変わり、疑似要素「after」は非表示にします。
これでaタグに「on」クラスの付いている時は、マイナスアイコンに変化します。

.menu-icon .accordion a.on:before{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.menu-icon .accordion a.on:after{
	background-color: transparent;
}

jQueryの構築

仕上げにjQueryのコード例です。

$(function() {
	// アイコンを囲うaタグの指定
	var toggles = $('.menu-icon .accordion a');
	//アイコンをクリックでクラスの切替え
	toggles.click( function (event) {
		event.preventDefault(); 
		toggles.toggleClass("on");
	});
});
  • アイコンを囲うaタグにクリックイベントを設定します。
  • クリックイベントの処理内で、toggleClass(“on”); でaタグに「on」クラスの追加⇔取り消しを交互に行うようにします。

DEMOはこちら

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

16 + 13 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧