サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

CSS3: transitionを使ってメニューのナビゲーションをつくる

ID: FN1501002 Technique: HTML5 and CSS Library: Prefix free

CSS transitionは、CSSプロパティをアニメーションさせて変えることができます。つぎのサンプル001は、transitionプロパティを使ってつくったプルダウンメニューのナビゲーションです[*1]。サブメニューは不透明度を上げながら広がり、メニューテキストの色も短い時間で変わっています。JavaScriptコードはまったく書かず、transitionプロパティの基本的な使い方でつくれます。

サンプル001■CSS3: Menu navigation with transition

[*1] このサンプルはNew Media Campaigns「Nicer Navigation with CSS Transitions」を参考にしています。transitionプロパティの使い方がわかりやすいように、コードをできるだけ少なくしてまとめました。

01 静的なナビゲーションをstyle要素で定める

メニューは、つぎのようなリストで組みます。子のリスト要素がサブメニューです。body要素に書いたコードは、以下のとおりです(前掲サンプル001では、幅の都合から、メインメニューの文字数を少し減らしました)。

<ul id="navigation">
  <li><a href="http://jsdo.it/FumioNonaka/codes" target="_blank">Home</a></li>
  <li><a href="#">JavaScriptについて</a>
    <ul>
      <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference" target="_blank">JavaScriptリファレンス</a></li>
      <li><a href="http://www.createjs.com/#!/Docs" target="_blank">CreateJS Docs (英語)</a></li>
      <li><a href="http://semooh.jp/jquery/" target="_blank">jQueryリファレンス</a></li>
    </ul>
  </li>
<li><a href="#">Web標準について</a>
    <ul>
      <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference?redirectlocale=ja&redirectslug=Web%2FCSS%2FCSS_Reference" target="_blank">CSS リファレンス</a></li>
      <li><a href="http://www.w3.org/html/wg/drafts/html/master/" target="_blank">HTML 5.1 Nightly (英語)</a></li>
    </ul>
  </li>
  <li><a href="http://fumiononaka.com" target="_blank">FumioNonaka.com</a></li>
</ul>

</div>

アニメーションは後に回して、サブメニューの開いた静的なナビゲーションをstyle要素でつくります(図001)。以下のコード001のとおり、li要素のa要素について、:hover擬似クラスでcolorプロパティの値を与えましたので、マウスポインタが重なるとメニューテキストの色が変わります(第19〜21行目)。

図001■サブメニューの開いた静的ナビゲーション
図001

コード001■サブメニューが開いたままのstyle要素
  1. body {
  2.   font: 14px sans-serif;
  3. }
  4. #navigation {
  5.   list-style-type: none;
  6.   padding: 0;
  7.   margin: 0;
  8. }
  9. #navigation li {
  10.   float: left;
  11.   line-height: 40px;
  12.   background: darkcyan;
  13. }
  14. #navigation li a {
  15.   padding: 0 15px;
  16.   color: white;
  17.   text-decoration: none;
  18. }
  19. #navigation li a:hover {
  20.   color: springgreen;
  21. }
  22. #navigation li ul {
  23.   position: absolute;
  24.   list-style-type: none;
  25.   padding: 0;
  26. }
  27. #navigation li ul li {
  28.   float: none;
  29.   position: static;
  30.   height: 30px;
  31.   line-height: 30px;
  32. }

02 プルダウンメニューの開け閉じ

CSSでプルダウンメニューを開け閉じしようとしたとき、よく用いられるのがつぎのように:hover擬似クラスでdisplayプロパティを切替えることです(MDN「:hover」「ドロップダウンメニュー」参照)。なお、行番号は後にまとめたコード002にもとづきます。予めプロパティの値をnoneにしておけば、サブメニューが見えません(第23行目)。マウスポインタが重なったら、displayプロパティを見える値に変えます(第29行目)。これで、サブメニューが開くことになります(図002)。

  1. #navigation li ul {
  2.   display: none;
  1. }
  2. #navigation li:hover ul {
  3.   display: block;
  4. }

図002■メインメニューにポインタが重なるとサブメニューが表示される
図002

前掲コード001のstyle要素を書直したのが、つぎのコード002です。まがりなりにも、メニューの開け閉じはできるようになりました。つぎは、このナビゲーションの動きを、滑らかなアニメーションにします。

コード002■:hover擬似クラスでサブメニューの表示・非表示を切替える
  1. body {
  2.   font: 14px sans-serif;
  3. }
  4. #navigation {
  5.   list-style-type: none;
  6.   padding: 0;
  7.   margin: 0;
  8. }
  9. #navigation li {
  10.   float: left;
  11.   line-height: 40px;
  12.   background: darkcyan;
  13. }
  14. #navigation li a {
  15.   padding: 0 15px;
  16.   color: white;
  17.   text-decoration: none;
  18. }
  19. #navigation li a:hover {
  20.   color: springgreen;
  21. }
  22. #navigation li ul {
  23.   display: none;
  24.   position: absolute;
  25.   list-style-type: none;
  26.   padding: 0;
  27. }
  28. #navigation li:hover ul {
  29.   display: block;
  30. }
  31. #navigation li ul li {
  32.   float: none;
  33.   position: static;
  34.   height: 30px;
  35.   line-height: 30px;
  36. }

03 プロパティをアニメーションさせる

transitionプロパティを用いると、CSSプロパティの値が滑らかなアニメーションで変えられます。transitionは、さまざまな要素から定められます。けれど、今回のサンプルで使うのは、もっとも基本的なアニメーションの時間だけです[*2]。transitionプロパティによるアニメーションについてさらに詳しく知りたい方は、MDN「CSS transition の使用」をお読みください。

transition: 時間

このtransitionプロパティで、プルダウンメニューを下にのびるように拡げます。style要素のコードは、後にコード003としてまとめました。サブメニューの高さは、heightとline-heightプロパティで変えます。初めふたつの値はともに0にしておき、transitionプロパティを定めます(第34〜36行目)。そして、マウスポインタが重なった:hover擬似クラスで、メニューが開いたときの値に変えるのです(第38〜41行目)。

  1. #navigation li ul li {
  2.   float: none;
  3.   position: static;
      /* height: 30px; */
  4.   height: 0;
      /* line-height: 30px; */
  5.   line-height: 0;
  6.   transition: 0.5s;
  7. }
  8. #navigation li:hover ul li {
  9.   height: 30px;
  10.   line-height: 30px;
  11. }

ただし、これだけではまだtransitionが動きません。実は、displayプロパティがnoneに定められていると、アニメーションができないのです[*3]。そこでつぎのように、displayでなく、opacityプロパティでサブメニューの非表示と表示を切替えることにしました(第23および第29行目)。

  1. #navigation li ul {
      /* display: none; */
  2.   opacity: 0;
  3.   position: absolute;
  4.   list-style-type: none;
  5.   padding: 0;
  6. }
  1. #navigation li:hover ul {
      /* display: block; */
  2.   opacity: 1;
  3. }

これで、サブメニューは下に伸びるアニメーションで表示されます(コード003)。けれど、サブメニューからマウスポインタが外れると、直ちに消えてしまいます。サブメニューが閉じるときも、縮むアニメーションにして仕上げましょう。

コード003■transitionプロパティでサブメニューを下に拡げて表示させる
  1. body {
  2.   font: 14px sans-serif;
  3. }
  4. #navigation {
  5.   list-style-type: none;
  6.   padding: 0;
  7.   margin: 0;
  8. }
  9. #navigation li {
  10.   float: left;
  11.   line-height: 40px;
  12.   background: darkcyan;
  13. }
  14. #navigation li a {
  15.   padding: 0 15px;
  16.   color: white;
  17.   text-decoration: none;
  18. }
  19. #navigation li a:hover {
  20.   color: springgreen;
  21. }
  22. #navigation li ul {
  23.   opacity: 0;
  24.   position: absolute;
  25.   list-style-type: none;
  26.   padding: 0;
  27. }
  28. #navigation li:hover ul {
  29.   opacity: 1;
  30. }
  31. #navigation li ul li {
  32.   float: none;
  33.   position: static;
  34.   height: 0;
  35.   line-height: 0;
  36.   transition: 0.5s;
  37. }
  38. #navigation li:hover ul li {
  39.   height: 30px;
  40.   line-height: 30px;
  41. }

[*2] CSS3の機能は、ブラウザとそのバージョンによってベンダー接頭辞を加えなければなりません。たとえば、WebKit系なら-webkit-、Mozilla系は-moz-などです。本稿では、JavaScriptライブラリ「Prefix free」を用いることにより、ベンダー接頭辞は省きました(図003)。ベンダー接頭辞は、Prefix freeが自動的につけてくれるのです(「CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ」02「CSSプロパティのベンダー接頭辞と『Prefix free』」参照)。

<script src="lib/prefixfree.min.js"></script>

図003■Prefix freeサイト
図003

[*3] MDN「CSS transition の使用」からリンクされた文書Oli.jp「CSS animatable properties」には、つぎのように記載されています。

"display between none and anything else"

04 プルダウンメニューが伸び縮みして表示されるアニメーションを仕上げる

初めに示したサンプル001のstyle要素は、後にコード004としてまとめました。サブメニューが縮むアニメーションを動かすには、そのul要素にtransitionプロパティを定めます(第28行目)。もうひとつ、メニューテキストにマウスポインタが重なったときの色の変化も、transitionプロパティで短いアニメーションにしました(第18行目)。

  1. #navigation li a {
  1.   color: white;
  1.   transition: 0.5s;
  2. }
  3. #navigation li a:hover {
  4.   color: springgreen;
  5. }
  6. #navigation li ul {
  1.   transition: 1s;
  2. }

これで、サブメニューを伸縮とアルファのアニメーションで開閉し、マウスポインタを重ねたメニューテキストの色も変化するナビゲーションができあがりました。

コード004■プルダウンメニューを伸び縮みのアニメーションで表示する
  1. body {
  2.   font: 14px sans-serif;
  3. }
  4. #navigation {
  5.   list-style-type: none;
  6.   padding: 0;
  7.   margin: 0;
  8. }
  9. #navigation li {
  10.   float: left;
  11.   line-height: 40px;
  12.   background: darkcyan;
  13. }
  14. #navigation li a {
  15.   padding: 0 15px;
  16.   color: white;
  17.   text-decoration: none;
  18.   transition: 0.5s;
  19. }
  20. #navigation li a:hover {
  21.   color: springgreen;
  22. }
  23. #navigation li ul {
  24.   opacity: 0;
  25.   position: absolute;
  26.   list-style-type: none;
  27.   padding: 0;
  28.   transition: 1s;
  29. }
  30. #navigation li:hover ul {
  31.   opacity: 1;
  32. }
  33. #navigation li ul li {
  34.   float: none;
  35.   position: static;
  36.   height: 0;
  37.   line-height: 0;
  38.   transition: 0.5s;
  39. }
  40. #navigation li:hover ul li {
  41.   height: 30px;
  42.   line-height: 30px;
  43. }

作成者: 野中文雄
作成日: 2015年1月10日

Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.