CSSでプルダウンメニューを作ってみる

JavaScriptを使用せずに、CSSのみでスマホ向けのプルダウンメニューを実装してみました。
デモページはこちらになります。

■HTML

<div id="page">
 <header id="header">
        <p class="nav-open"><a href="#gNav">MENU</a></p>
        <nav id="gNav">
         <ul>
              <li><a href="">メニュー</a></li>
              <li><a href="">メニュー</a></li>
              <li><a href="">メニュー</a></li>
              <li><a href="">メニュー</a></li>
              <li><a href="">メニュー</a></li>
              <li><a href="">メニュー</a></li>
          </ul>
         <div class="nav-close"><a href="#page">CLOSE</a></div>
      </nav>
    </header>
 <div id="contents">
     <p>コンテンツ内容</p>
      <p>コンテンツ内容</p>
      <p>コンテンツ内容</p>
  </div>
</div>

■CSS
必要箇所のみ抜粋しています。

#header {
    height: 30px;
}
#header #nav-open {
   position: absolute;
 width: 100%;
    height: 30px;
   z-index: 200;
   margin: 0;
  background: #000;
}
#header #nav-open a {
 position: absolute;
 top: 5px;
   right: 10px;
}
#gNav {
    width: 100%;
    position: absolute;
 top: -180px;
    z-index: 100;
   transition: top 1s;
 -webkit-transition: top 1s;
 -moz-transition: top 1s;
    text-align: center;
 background:#1a1a1a;
}
#gNav:target {
  top: 30px;
}

ざっくり説明すると、メニュー部分を画面上部に隠しておいて、#gNavのtopの数値を変更して
表示・非表示を切り替える仕組みです。(#gNav の top: -180px; と #gNav:target の top: 30px;)
この数値は固定なので、メニュー・ヘッダーの高さが変わる場合は、数値を変更する必要があります。
　

プルダウンのアニメーションは、CSS3のtransitionと:targetを使用して、#gNavにターゲットが当たった時に表示され、ターゲットが外れた時に隠れるようにしています。
　

あと、プルダウンメニューをヘッダーの下から出てくるようにしたかったので、
①#headerの子要素に#nav-openと#gNavを置いて、重なり順を#nav-openが上にくるようにする。
②#nav-openを#headerと同じサイズに指定して、#nav-openに対してヘッダーの背景色をつける。
といった形にしています。