2014.06.20
css

CSSだけで動きのあるアコーディオン・メニュー

アコーディオンメニューはjQueryを使うと簡単にできるのですが、CSS3だけでも十分できます。

Attention!!

この記事の内容について、ヨロズナさんからより良いソースをアドバイスいただきましたので、改訂版を書きました。この記事はリファレンスとして残しておきます。
改訂版の記事はこちらへどうぞ。

css043

CSSだけで動くアコーディオンメニュー

jQueryよりは融通が利かない部分もありますが、こういう使い方もできるという意味でソースを紹介します。応用しやすいようにかなりシンプルなソースにしたつもりです・・・。
動的なサイトではちょっと厳しいかもしれませんが、静的なHTMLサイトだったら重宝しそうです。

では、以下ソースです。

HTMLソース

<div id="menu_box">
  <ul class="menu">
   <li class="drop_2row"><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li class="drop_3row"><a href="#">メニュー2</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li class="drop_4row"><a href="#">メニュー3</a>
      <ul>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li><a href="#">メニュー4</a></li>
  </ul>
</div>

HTMLのソースは通常のリスト表示で作成。
3行目、9行目、16行目のCSSのクラスは下記CSSにて説明します。

CSSソース

メニュー部分のスタイル

#menu_box {
   margin:0; 
   float:left;
   border:#e5e4e6 1px solid;
}
.menu {
   list-style:none;
   padding:0;
   margin:0;
   overflow: hidden;
   position: relative;
}
.menu li {
   width:190px;/*メニューの幅*/
   background:#ADC653;
   position: relative;
   height:50px;/*メニューの高さ*/
}
.menu li a {
   text-decoration:none;
   color:#993300;
   font-size:12px;
   display:block;
   padding:0 10px;
   height:49px;
   line-height:49px;
   border-bottom:1px solid #fff;
   color:#5B6F25;
   font-weight:bold;
}
.menu li ul {
   margin:0;
   padding:0;
}
.menu li ul li {
   background:#dcd3b2; 
}
.menu li ul li a {
   color:#9e9478; 
}
  • 1行目~5行目・・・メニュー全体の枠
  • 6行目~12行目・・・メニューのスタイル。overflowをhiddenにしてサブメニューを隠しています。
  • 13行目~30行目・・・メインメニューのスタイル。17行目のheightがポイント。これ以上を10行目のoverflowでhiddenにしています。
  • 31行目~40行目・・・サブメニューのスタイル。サブメニューのスタイルを指定する場合はこの範囲にスタイル追加可能。

隠れたり現れたりのアニメーション部分のCSS

.menu .drop_2row:hover {/*サブメニューが2つのとき*/
   height:150px;
}
.menu .drop_3row:hover {/*サブメニューが3つのとき*/
   height:200px;
}
.menu .drop_4row:hover {/*サブメニューが4つのとき*/
   height:250px;
}
.menu * {/*アニメーション*/
   -moz-transition: .5s;
   -webkit-transition: .5s;
   -o-transition: .5s;
   -ms-transition: .5s;
   transition: .5s;
}

CSSでアコーディオンにするには、アコーディオンで広がる範囲をheightを指定しないといけません。ここでは、サブメニューが2つのとき、3つのとき、4つのとき・・・とそれぞれクラスを追加しています。
ここがjQueryと違うところです。
jQueryのように自動的にslide upやslide downでheightを指定する必要がなければ、かなり使えるのですが・・・。

  • 1行目~3行目・・・メインメニュー高さ50px + (サブメニュー高さ50px × 2つ)= 高さ150px
  • 4行目~6行目・・・メインメニュー高さ50px + (サブメニュー高さ50px × 3つ)= 高さ200px
  • 7行目~9行目・・・メインメニュー高さ50px + (サブメニュー高さ50px × 4つ)= 高さ250px
  • 10行目~16行目・・・アコーディオンのアニメーション部分
関連する記事

コメント & トラックバック
  1. […] ▼記事リンク CSSだけで動きのあるアコーディオン・メニュー | Ri-mode Rainbow | No:2888 […]


  2. ヨロズナ

    はじめまして! いつも拝読しております。
    アコーディオンナビ、形としては使う機会多いものの、CSSのみで実現となるとちょっとややこしいなあ…と考えるキッカケになりました。

    アコーディオンで広がる範囲(高さ)の指定が必須であることがネックだということでしたので、何とか出来ないか試してみました。

    http://codepen.io/yorozuna/full/uHDxI/

    上記で実現できたかなというところで。
    もっと良いやり方ありそうな気もしますが考察の足しになればと思います;


    • Ri-mode

      ヨロズナさん

      素晴らしいです!!
      高さの部分、実は色々試してできなくて、やっぱりjQueryだよなーなんて思っていたので嬉しいです。
      CSSもこうやってフレキシブルに使えるとウェブ作成の幅が広がりますね!
      ヨロズナさんが書いてくださったソースも修正版として近いうち別途リファレンスとして紹介させていただきます。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP