意外とカンタン!CSS3で作る、スマホとかレスポンシブWebサイト用メニューアイコンのエフェクト

2014.8.2 CSS

意外とカンタン!CSS3で作る、スマホとかレスポンシブWebサイト用メニューアイコンのエフェクト|ツーブロッカ 佐藤正康

【追記あり】
※iOSで動かなかったので少し調べたらtransformにベンダープレフィクス付けて動作しました。すみませんでした。
というわけでCSSのソース若干変わっています。。。

スマートフォンでWebサイトを見ていると、画面左(もしくは右)にこんなアイコンが表示されることがあると思います。

cinra

いわば「メニューアイコン」なのですが、これが画像やアイコンフォントを使わなくてもHTMLとCSSだけで出来てしまうのです。

今日はその作り方と、さらに「閉じる」ボタンに変化するアニメーションも作ってみます。

もう一度言います。HTMLとCSSだけで作ります!

意外とカンタン!CSS3で作る、スマホとかレスポンシブWebサイト用メニューアイコンのエフェクト

まずボタンの領域を造ります。

HTML

<div class="window">
 <a href="#" class="modal-close"><i></i></a>
</div>

シンプル。
まぁコレでなくてもいいんですけどね。

僕はこういうリンクをしない場合にa要素を使うのは好きではないのですが、例として、体(てい)としてa要素にしてやります。
本当は別の要素をcursor:pointerでなんとかするのが適切かと思います。

そしてCSS。

CSS

/*ウィンドウ*/
 .window{
 width: 300px;
 height:200px;
 position: relative;
 background-color:#efefef;
 border-radius: 4px;
 }
/*アイコン領域*/
 a.modal-close{
 display: block;
 width: 25px;
 height: 25px;
 position: absolute;
 top: 10px;
 right: 10px;
 }
/*2本目*/
 a.modal-close>i{
 width: 100%;
 height:3px;
 margin-top: 11px;
 margin-bottom: 11px;
 display: inline-block;
 background-color: #000;
 }
/*1本目*/
 .modal-close:before{
 content:"";
 height:3px;
 width: 100%;
 display: inline-block;
 background-color: #000;
 position: absolute;
 top: 0;
 left: 0;
 }
/*3本目*/
 .modal-close:after{
 content:"";
 height:3px;
 width: 100%;
 display: inline-block;
 background-color: #000;
 position: absolute;
 bottom: 0;
 left: 0;
 }

 

.windowは都合で指定しているだけですので、実際の状況に合わせて頂いて
その中の.modal-closeに対する指定が重要となります。

1本目と3本目のラインは擬似要素:before :afterで実装しています。
真ん中の2本目のみ、<i>で実装しています。
height: は今回3pxですが必要に応じて変えてください。

アイコンの領域となるa要素には高さと幅を指定します。ここは同じ値にしましょう
そしてposition:absoluteで任意の位置に配置できるようにします。

ちなみに2本目ので実装したラインをどう1,3本目の間に配置するか、ですが
今回はmargin-top margin-bottomと2本目のラインの高さを足してアイコンの高さになるようにしています。
icon1

ここまででアイコン自体は完成しました!

確認していませんが、IEでもここまでなら正常に表示されることでしょう。
一応:after , :before擬似要素はIE8から対応していると思うので…
デモ

ではここにおもしろいエフェクトを付けてみます。
3本の平行線が、交差した2本線「×」に変わるアニメーションです。

CSS

/*1本目のアニメーション*/
 .modal-close.animation > i{
 -webkit-animation: clossAnimationHide;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-duration: 1s;
 -webkit-animation-fill-mode: forwards;
 -o-animation: clossAnimationHide;
 -o-animation-timing-function: ease-in-out;
 -o-animation-duration: 1s;
 -o-animation-fill-mode: forwards;
 animation: clossAnimationHide;
 animation-timing-function: ease-in-out;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 }
/*3本目のアニメーション*/
 .modal-close.animation:after{
 -webkit-animation: clossAnimation;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-duration: 1s;
 -webkit-animation-fill-mode: forwards;
 -o-animation: clossAnimation;
 -o-animation-timing-function: ease-in-out;
 -o-animation-duration: 1s;
 -o-animation-fill-mode: forwards;
 animation: clossAnimation;
 animation-timing-function: ease-in-out;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 }
/*2本目のアニメーション*/
 .modal-close.animation:before{
 -webkit-animation: clossAnimationRev;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-duration: 1s;
 -webkit-animation-fill-mode: forwards;
 -o-animation: clossAnimationRev;
 -o-animation-timing-function: ease-in-out;
 -o-animation-duration: 1s;
 -o-animation-fill-mode: forwards;
 animation: clossAnimationRev;
 animation-timing-function: ease-in-out;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 }

 

ほかにもたくさんプロパティの指定で種類はありますが、今回はanimation-name(名前),animation-timing-function(アニメションの緩急)
animation-duration(アニメーションの長さ)、animation-fill-mode(アニメーション終了後のアニメーション要素の状態)の指定のみしています。

ここでとても大事なのが「animation-fill-mode」です。
通常keyframesで定義したアニメーションは終了するとアニメーション前の状態に戻ってしまいます。
アニメーション後のオブジェクトの状態を定義するのがこのプロパティです。

animation-fill-mode:forwards;で、アニメーション後の状態を維持できます。
web帳 | css3 アニメーション animation-fill-mode

これらのアニメーションを、a要素に.animationというクラスがついた時に動作するようにしています。

ではアニメーションの自体の動作を書きます。

CSS

/*45度傾く|下から上に動く*/
@-webkit-keyframes clossAnimation {
from { transform: rotate(0deg);}
to {
bottom:42.5%;
-webkit-transform: rotate(45deg);
}
}
@-o-keyframes clossAnimation {
from { transform: rotate(0deg);}
to {
bottom:42.5%;
-o-transform: rotate(45deg);
}
}
@-moz-keyframes clossAnimation {
from { transform: rotate(0deg);}
to {
bottom:42.5%;
-moz-transform: rotate(45deg);
}
}
@keyframes clossAnimation {
from { transform: rotate(0deg);}
to {
bottom:42.5%;
transform: rotate(45deg);
}
}

/*-45度傾く|上から下に動く*/
@-webkit-keyframes clossAnimationRev {
from { transform: rotate(0deg);}
to {
top:42.5%;
-webkit-transform: rotate(-45deg);
}
}
@-o-keyframes clossAnimationRev {
from { transform: rotate(0deg); }
to {
top:42.5%;
-o-transform: rotate(-45deg);
}
}
@-moz-keyframes clossAnimationRev {
from {transform: rotate(0deg);}
to {
top:42.5%;
-moz-transform: rotate(-45deg);
}
}
@keyframes clossAnimationRev {
from { transform: rotate(0deg);}
to {
top:42.5%;
transform: rotate(-45deg);
}
}

/*2本目|消える*/
@-webkit-keyframes clossAnimationHide {
from {
opacity: 1;
-webkit-filter: alpha(opacity=100);
}
to {
opacity: 0;
-webkit-filter: alpha(opacity=0);
}
}
@-o-keyframes clossAnimationHide {
from {
opacity: 1;
-o-filter: alpha(opacity=100);
}
to {
opacity: 0;
-o-filter: alpha(opacity=0);
}
}
@-moz-keyframes clossAnimationHide {
from { opacity: 1;}
to {opacity: 0; }
}
@keyframes clossAnimationHide {
from {
opacity: 1;
filter: alpha(opacity=100);
}
to {
opacity: 0;
filter: alpha(opacity=0);
}
}

長げぇ…なげぇよ…

SublimeTextで「@kf」とやるとこのセットが出てくるので書いておきましたが、たぶん-o-とか要らないと思います。
transformプロパティはまだ草案の段階なので、ベンダープレフィックスの指定は必要ですね…すみません。
詳しくはコチラを参照
transform – CSS | MDN

fromとToで指定するシンプルな形です。
もっと細かくアニメーションを指定したい場合は「from~to」でなく「%」で区切ってくださいね。

このとき、keyframes{~}内のCSS3プロパティに注意してください。ベンダープレフィックスが、更にここで必要となってくるケースが有ります。

icon2

topとbottomから42.5%移動して:before(1本目)と:after(3本目)の線が中央に寄り添うように動かします。
それぞれの高さが3pxなので、領域の高さに対して上手く交差するようにしてください。

keyframesだけで勝手に動くデモ

このアニメーションを、アイコンをクリックした時に動作するようにしましょう!

jQuery

$('a.modal-close').on('click' , function(event){
 event.preventDefault();
 $(this).addClass('animation');
}

ここでjQueryが登場してしまいます…が、これだけです!内容はいたってカンタン。
アイコン(a.modal-close)をクリックすると、そこに.animationを付加するだけです。
event.preventDefalut();はa要素のリンク機能を無効化しているものです。
jQueryライブラリを事前に読み込んでくださいね

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

以上を踏まえたものがこちら

クリックでアイコンが動くデモ

いかがでしょうか?

汎用性は決して高くはないですが、UIとしてひとつ、ユーザーに貴重な印象をあたえるかもしれません。
貴重なアニメーションやなめらかな動きは、言葉になる出来事ではないにしろ「なんとなくイイ」と第6感に刷り込む「何か」は大事だと思っています!

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。