この記事はSYSKEN Advent Calendar 2016 3日目の記事です。

皆様はじめまして、しゃーです。記事というものを初めて書くので少し緊張しますが頑張りたいと思います。

僕はcssのアニメーションを用いたメニューについて書いていきます。

こういうマウスオーバーした時に画面の外からニュッと出てくるメニューの作り方を書いていきます。

作り方

HTML

<div class="menu">
　　<ul>
　　　　<li>リスト</li>
　　　　<li>リスト</li>
　　　　<li>リスト</li>
  </ul>
</div>

divで囲われている部分がメニューになります。

CSS

.menu{
  position: fixed; /*leftを適用させるために必要*/
  left: -250px; /*通常時隠しておく部分*/
  width: 300px; /*メニュー全体の横幅*/
  transition: transform 500ms ease-in-out; 
}

/*hover時の処理*/
.menu:hover{
  transform: translate(250px);/*通常時隠して置く部分と同じ値にする*/
}

leftを使って、通常時隠したい範囲をpxで指定します。今回は画面の左側に250pxずらしてリストの部分を隠しています。右側や上側とかに隠したい場合はrightやtopを使えば大丈夫です。

hoverを使ってマウスオーバー時の処理を書いています。translateを使ってマウスオーバー時に250px右側にずれるようになっています。こうすることで隠れていた部分が画面に表示されるようになっています。

transitionを使って通常時とマウスオーバー時の変化をなめらかにしています。transitionの値には順番に時間的変化を適用させたいプロパティ、変化にかかる時間、変化のタイミング、変化が始まるまでの時間を指定できます。今回はtransformを500msでease-in-out(ゆっくりはじまってゆっくり終わる)で変化させるとなっています。

まとめ

たったこれだけでそれっぽいものができるなんていい時代ですね。ただこの方法だとスマホなどではメニューが開かないのでそこの対策は必要そうです。

はじめての記事投稿で稚拙な文章ですが読んで頂きありがとうございました。明日のAdvent Calendarもお楽しみに！

Tweet