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

HTML5テクニカルノート

CSS3: transitionを使ったアコーディオンメニュー

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

CSS3のtransitionプロパティを使うと、プロパティの値をアニメーションで切替えることができます。tobypitman.com「Dynamic CSS3 Animated Accordian Menu」を参考に、アコーディオンメニューをつくりました。コードの行数はわかりやすいように減らし、手直ししたサンプルで仕組みをご説明します(サンプル001)。JavaScriptコードは書きません。

サンプル001■CSS3: Accordion menu


01 開いたメニューのデザイン

メニューはつぎのようにリストで組立てます。body要素に加えるコードは以下のとおりです。メインメニューのa要素には、id属性が与えてあります。

  • JavaScript
    • JavaScriptリファレンス
    • CreateJS Docs (英語)
    • jQueryリファレンス
  • Web標準
    • CSSリファレンス
    • HTML 5.1 Nightly (英語)
  • Close

<div id="wrap">
<ul class="menu">
  <li class="title"><a id="menu01" href="#menu01"><span>JavaScript</span></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 class="title"><a id="menu02" href="#menu02"><span>Web標準</span></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 class="title"><a id="bottom" href="#"><span>Close</span></a>
  </li>
</ul>
</div>

まずは、開いたメニューをデザインするため、後に掲げるコード001のCSSを定めます。サブメニューのa要素に:hover擬似クラスを定めましたので、マウスポインタを重ねるとその項目がハイライトします(図001)。

  1. .title ul li a:hover {
  2.   background: lightsteelblue;
  1. }

図001■開いたメニューの項目がロールオーバーでハイライトする
図001

メニュー(クラスmenu)に定めたスタイルについて、以下に抜書きして補います。border-radiusプロパティはボーダーの角を丸めます(第19行目)。また、box-shadowプロパティは、つぎのような構文で影を加えます(第23行目)。

box-shadow: 水平のずれ 垂直のずれ ぼかしの大きさ 影色

そして、backgroundプロパティに与えたlinear-gradient()関数が、色の線形グラデーションを定めます(第22行目)[*1]。メニューが閉じた状態で見るとわかりやすいでしょう(図002)。メインメニュー項目の上から下に向けて、背景色にグラデーションがかかります。

linear-gradient(to 終点, 開始色, 終了色)

図002■メインメニューの項目にまたがって背景色にグラデーションがかかる
図002

  1. .menu {
  1.   border-radius: 20px;
  1.   background: linear-gradient(to bottom, whitesmoke, silver);
  2.   box-shadow: 0px 4px 10px darkgray;
  3. }

ここまでの開いたメニューのstyle要素をまとめたのが、以下のコード001です。ロールオーバーのハイライトも、クリックしたときのリンクもすでに定められています。

コード001■開いたメニューとロールオーバーのデザインを定める
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   text-align: center;
  7.   font: 14px sans-serif;
  8. }
  9. #wrap {
  10.   margin: 50px auto 0 auto;
  11.   width: 200px;
  12.   text-align: left;
  13. }
  14. a {
  15.   text-decoration: none;
  16. }
  17. .menu {
  18.   width: 200px;
  19.   border-radius: 20px;
  20.   list-style: none;
  21.   border: 1px solid darkgray;
  22.   background: linear-gradient(to bottom, whitesmoke, silver);
  23.   box-shadow: 0px 4px 10px darkgray;
  24. }
  25. .title {
  26.   overflow: hidden;
  27.   border-top: 1px solid white;
  28. }
  29. .menu li.title:first-child {
  30.   border-top: none;
  31. }
  32. .title a span {
  33.   display:block;
  34.   padding:10px 10px 10px 20px;
  35.   color: black;
  36. }
  37. .title ul li a {
  38.   display: block;
  39.   padding-left: 20px;
  40.   line-height: 30px;
  41.   text-decoration: none;
  42.   font-size: 14px;
  43.   background: white;
  44.   color: darkslategray;
  45. }
  46. .title ul li a:hover {
  47.   background: lightsteelblue;
  48.   color: black;
  49. }
  50. .title ul li a {
  51.   display: block;
  52. }
  53. #bottom span {
  54.   font-size: 10px;
  55.   padding: 10px 10px 10px 20px;
  56. }

[*1] グラデーションの定め方について詳しくは、MDN「CSS グラデーションの利用」をご参照ください。

02 開けるサブメニューをターゲット要素から捉える

つぎに、メインメニューのクリックでサブメニューを開きます。このとき、ターゲット要素を使うので、a要素にそれぞれid属性を与え、対応したターゲットをhref属性に定めました。

<ul class="menu">
  <li class="title"><a id="menu01" href="#menu01"><span>JavaScript</span></a>

  <li class="title"><a id="menu02" href="#menu02"><span>Web標準</span></a>

</ul>

予めサブメニューは閉じておくので、以下のようにサブメニューのa要素はheightを0にしておきます(第50〜51行目)。そのうえで、メインメニューをクリックしたときに、そのサブメニューを開くようにします。

メインメニューをクリックすると、そのa要素のhref属性に定めたターゲットがURL(URI)に識別子として加わります。このとき、識別子が示す要素は、:target擬似クラスで表せるのです。そして、隣接セレクタ+により、その後のul要素つまりサブメニューのa要素のheightプロパティが拡げられます(第54〜56行目)。

  1. .title ul li a {
  2.   height: 0px;
  1. }
  2. :target + ul li a {
  3.   height: 30px;
  4. }

こうして、クリックした項目のサブメニューが開きます(図004)。ここまでのstyle要素をまとめたのが、以下のコード002です。もっとも、サブメニューはいきなり開くので、まだアコーディオンの動きにはなっていません。

図003■クリックした項目のサブメニューが開く
図003

コード002■クリックしたターゲット要素のつぎのリストのサブメニューを開く
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   text-align: center;
  7.   font: 14px sans-serif;
  8. }
  9. #wrap {
  10.   margin: 50px auto 0 auto;
  11.   width: 200px;
  12.   text-align: left;
  13. }
  14. a {
  15.   text-decoration: none;
  16. }
  17. .menu {
  18.   width: 200px;
  19.   border-radius: 20px;
  20.   list-style: none;
  21.   border: 1px solid darkgray;
  22.   background: linear-gradient(to bottom, whitesmoke, silver);
  23.   box-shadow: 0px 4px 10px darkgray;
  24. }
  25. .title {
  26.   overflow: hidden;
  27.   border-top: 1px solid white;
  28. }
  29. .menu li.title:first-child {
  30.   border-top: none;
  31. }
  32. .title a span {
  33.   display:block;
  34.   padding:10px 10px 10px 20px;
  35.   color: black;
  36. }
  37. .title ul li a {
  38.   display: block;
  39.   padding-left: 20px;
  40.   line-height: 30px;
  41.   text-decoration: none;
  42.   font-size: 14px;
  43.   background: white;
  44.   color: darkslategray;
  45. }
  46. .title ul li a:hover {
  47.   background: lightsteelblue;
  48.   color: black;
  49. }
  50. .title ul li a {
  51.   height: 0px;
  52.   display: block;
  53. }
  54. :target + ul li a {
  55.   height: 30px;
  56. }
  57. #bottom span {
  58.   font-size: 10px;
  59.   padding: 10px 10px 10px 20px;
  60. }

03 transitionプロパティでメニューの開け閉めをアニメーションさせる

では、img要素に画像のsrc属性をつぎのように加えます。ボタンのリストについては、前掲のコードのまま変えていません。

transitionプロパティを使えば、アニメーションでopacityプロパティの値が変えられます。transitionに定めるもっとも基本的な値は、つぎのようにアニメーションの時間、および変化のタイミング関数のふたつです(「CSS transition の使用」参照)。タイミング関数は値の変わり方を決め、キーワードから選べます(図004)。

transition: 時間 タイミング関数
図004■タイミング関数のキーワードと値の変化
linear 図004linear   ease
(デフォルト) 		図004ease
ease-in 図004ease-in   ease-in-out 図004ease-in-out
ease-out 図004ease-out   step-start 図004step-start
step-end 図004step-end      

サブメニューのa要素には、つぎのようにtransitionプロパティの定めを加えました(第53行目)。タイミング関数のease-in-outは、デフォルトのeaseより初めと終わりのカーブがなだらかです(前掲図004)。

  1. .title ul li a {
  2.   height: 0px;
  1.   transition: 0.5s ease-in-out;
  2. }
  3. :target + ul li a {
  4.   height: 30px;
  5. }

これでアコーディオンメニューの動きができました。メインメニューをクリックすると、アコーディオンのようにサブメニューが広がります。書上げたstyle要素は、つぎにまとめたコード003のとおりです。このコードを前掲サンプル001に定めました。

コード003■クリックしたターゲット要素のつぎのリストをアニメーションで開く
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   text-align: center;
  7.   font: 14px sans-serif;
  8. }
  9. #wrap {
  10.   margin: 50px auto 0 auto;
  11.   width: 200px;
  12.   text-align: left;
  13. }
  14. a {
  15.   text-decoration: none;
  16. }
  17. .menu {
  18.   width: 200px;
  19.   border-radius: 20px;
  20.   list-style: none;
  21.   border: 1px solid darkgray;
  22.   background: linear-gradient(to bottom, whitesmoke, silver);
  23.   box-shadow: 0px 4px 10px darkgray;
  24. }
  25. .title {
  26.   overflow: hidden;
  27.   border-top: 1px solid white;
  28. }
  29. .menu li.title:first-child {
  30.   border-top: none;
  31. }
  32. .title a span {
  33.   display:block;
  34.   padding:10px 10px 10px 20px;
  35.   color: black;
  36. }
  37. .title ul li a {
  38.   display: block;
  39.   padding-left: 20px;
  40.   line-height: 30px;
  41.   text-decoration: none;
  42.   font-size: 14px;
  43.   background: white;
  44.   color: darkslategray;
  45. }
  46. .title ul li a:hover {
  47.   background: lightsteelblue;
  48.   color: black;
  49. }
  50. .title ul li a {
  51.   height: 0px;
  52.   display: block;
  53.   transition: 0.5s ease-in-out;
  54. }
  55. :target + ul li a {
  56.   height: 30px;
  57. }
  58. #bottom span {
  59.   font-size: 10px;
  60.   padding: 10px 10px 10px 20px;
  61. }

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

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