jQueryで作るハンバーガーメニュー【中級編④】

はじめに

今回は、下記のワイヤーフレームを元に、ハンバーガーメニューを制作していきます。

全体のコード一覧

See the Pen jQueryで作るハンバーガーメニュー by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

@media screen and (max-width: 640px) {
  .sp-nav {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: block;
    width: 100%;
    background: rgba(255, 68, 0, 0.8);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out;
  }

• transform: translateY(-100%);は、要素を垂直方向に-100%移動させることを指定しています。-100%は、要素の高さの100%分だけ上に移動することを意味します。例えば、要素が画面の外に移動して見えなくなる場合があります。

• transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out;は、transitionでプロパティの変化にアニメーションを加えます。

• opacity 0.3s ease-in-outは、opacityプロパティが変化する際に、その変化が0.3秒かけて「ease-in-out」イージング関数で行われることを意味します。ease-in-outは、アニメーションが最初と最後がゆっくりで、中間が速いという動きになります。

• left 0.3s ease-in-outは、leftプロパティが変化する際に、同じく0.3秒かけて「ease-in-out」イージング関数で行われることを意味します。

まとめ

今後、CSSの簡単な動きについてまとめていきます。今回は、少し応用として試しに指定してみました。