問題
プラスとマイナスが切り替わるアイコンを作りたい
解決策
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」クラスの追加⇔取り消しを交互に行うようにします。
コメント