問題
バツマーク（×）に切り替わるメニューアイコンを作りたい
解決策
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」に切り替えるようにしています。
コメント