問題 × 解決策

バツマーク(×)に切り替わるメニューアイコンの作り方

問題

バツマーク(×)に切り替わるメニューアイコンを作りたい

解決策

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

 

タップすることで切り替わるメニューアイコンの実装

よくスマホサイトで見かけるメニューアイコンで、バツマーク(×)に切り替わるアイコン、ありますよね?あれを作る方法をご紹介します!

  • css3、jQueryを使います。

HTMLの構築

まずHTMLのコード例です。

<ul class="menu-icon clearfix">
	<li class="menu">
	<a href="#">
		<span class="icon"></span>
		<span class="text">MENU</span>
	</a>
	</li>
</ul>

CSSの構築

メニューアイコンの枠の構築

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

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

メニューアイコンの構築

メニューアイコンの構築を行います。
aタグ内の「icon」クラスがメニューアイコンの構築の要となります。
Position: absolute; から位置を設定し、メニューアイコンの横棒(ー)を、幅30pxと高さ2pxで構築し、背景色を設定します。

  • バツマークへの変化の動きを出したいため、transition: .2s; を設定しています。
.menu-icon .menu {
	width: 100px;
	height: 60px;
	margin: 0;
}
.menu-icon .menu a {
	display: block;
	text-align: center;
	line-height:0;
	border:1px solid #ffffff;
	position: relative;
}

次にメニューアイコンの三本線を実現するため、疑似要素のbeforeとafterを使用します。
「icon」クラスと同じ設定にします。

  • バツマークへの変化の動きを出したいため、transition: .3s; を設定しています。

そしてbeforeは三本線の上の役として、marin-top: -10px; を、afterは三本線の下の役として、margin-top: 8px; を設定し、それぞれ上下に移動させます。

.menu-icon .menu a .icon:before,
.menu-icon .menu a .icon:after{
	display: block;
	content: "";
	position: absolute;
	top: 40%;
	left: 0;
	right:0;
	margin:auto;
	width: 30px;
	height: 2px;
	background: #40180A;
	transition: .3s;
}
.menu-icon .menu a .icon:before{
	margin-top: -10px;
}
.menu-icon .menu a .icon:after{
	margin-top: 8px;
}

メニューアイコンのバツマーク時の構築

メニューアイコンがバツマークとなる条件として、「aタグに”close”クラスが設定されている時」とします。
aタグに「close」クラスの付いている時、「icon」クラスは非表示(三本線の真ん中です)、beforeとafterのmargin-topを0にして、位置を戻します。
その後transform: rotate(); を使って、beforeとafterを45度と135度に(斜めに)回転させます。
これでaタグに「close」クラスの付いている時は、バツマークになるというわけです。

.menu-icon .menu a.close .icon{
	background: transparent;
}
.menu-icon .menu a.close .icon:before{
	margin-top: 0;
}
.menu-icon .menu a.close .icon:after{
	margin-top: 0;
}
.menu-icon .menu a.close .icon:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.menu-icon .menu a.close .icon:after{
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

メニューアイコン下のテキストの構築

CSSの最後の構築として、メニューアイコン下のテキストの構築を行います。

.menu-icon .menu a .text{
	display: block;
	position: absolute;
	bottom:20%;
	left:0;
	right:0;
	margin:auto;
	color:#40180A;
	font-size: 75%;
	font-weight:bold;
	letter-spacing: 0.5pt;
	text-align:center;
}

jQueryの構築

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

$(function() {
	// メニューアイコンを囲うaタグの指定
	var toggles = $('.menu-icon .menu a');
	//メニューアイコンをクリックでクラスの切替え
	toggles.click( function (event) {
		event.preventDefault(); 
		toggles.toggleClass("close");
		if(toggles.hasClass("close")){
			toggles.children(".text").html("CLOSE"); 
		}else{
			toggles.children(".text").html("MENU");
		};
	});
});
  • メニューアイコンを囲うaタグにクリックイベントを設定します。
  • クリックイベントの処理内で、toggleClass(“close”); でaタグに「close」クラスの追加⇔取り消しを交互に行うようにします。
  • もしaタグに「close」クラスを持っていれば、メニューアイコン下のテキストを「CLOSE」に切り替えて、そうでなければ「MENU」に切り替えるようにしています。

DEMOはこちら

コメント

コメントを残す

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

10 − nine =

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

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