[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル

サイト構築 -CSS

Post on:2013年2月19日

デモ

デモは3種類あり、各アイテムをホバーすると、ラーヴァランプの気持ちいいアニメーションが楽しめます。

デモページ

実装

実装は共通パートと3つのデモで異なるパートに分けて紹介します。

Step 1: 共通 HTML

HTMLは3つとも基本的には同じです。
classの「nav」は共通で、「ph-line-nav」を変更して利用します。

<div class="nav ph-line-nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Gallery</a>
  <a href="#">Contact</a>
  <div class="effect"></div>
</div>

Step 2: 共通 CSS

3つのデモの共通のスタイルから始めましょう。
ポイントは.navにposition: relative;を、その子の.nav aにflaot: left;にします。
※以下、ベンダープレフィックスは省略

.nav {
  overflow: hidden;
  position: relative;
  width: 480px; }
  .nav a {
    display: block;
    position: relative;
    float: left;
    padding: 1em 0 2em;
    width: 25%;
    text-decoration: none;
    color: #393939;
    transition: .7s; }
    .nav a:hover {
      color: #c6342e; }

続いて、光源がアニメーションで移動するラーヴァランプのエフェクトです。
マウスがa要素にホバーした時、アニメーションで中央に移動するようにします。

.effect {
  position: absolute;
  left: -12.5%;
  transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
  left: 12.5%; /* the middle of the first <a> */}
.nav a:nth-child(2):hover ~ .effect {
  left: 37.5%;  /* the middle of the second <a> */ }
.nav a:nth-child(3):hover ~ .effect {
  left: 62.5%; /* the middle of the third <a> */}
.nav a:nth-child(4):hover ~ .effect {
  left: 87.5%; /* the middle of the forth <a> */}

Step 3: 個別 CSS

ここから3つのデモごとのスタイルです。
一つ目のライン状のエフェクトから。

ラインのカラーとサイズを定義し、垂直に配置します。
ここでのポイントは、margin-leftの値は各アイテムの半分にすることです。

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white; 
  margin-left:-45px;
}

二つ目のドットです。
div.navに1pxの水平のラインを加え、疑似要素でドットを配置します。

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 38px;
  left: 50%;
  margin-left: -2px; 
  background: #c6342e;
  border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px; 
  margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }

三つ目はハートと矢です。
ハートと矢はスプライト画像を使用します。

スプライト画像

ハートは2つのエレメントから構成されており、左は:before、右は:afterです。z-indexで重なりを設定し、矢が貫通しているようにしています。

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('../images/heart.png') no-repeat; }

.ph-heart-nav .effect {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px; 
  margin-left:-31px; }

.ph-heart-nav a:before, .ph-heart-nav a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.ph-heart-nav a:after {
  z-index: 1;
  background-position: -73px 0; }