CSS3:CSSだけでアコーディオンメニュー

goto_jp 18,038views 更新:2014年2月7日

表示サンプルはこちら。
http://jsdo.it/goto_jp/pdzy

リストリンクをメニューにしてますが、開閉させるだけなら実はCSS3は必要ありません。

ポイントとしては下記のようにサブメニューの<li>のサイズを変えるだけです。

.menu li ul li {
  ~
  height: 0;
  overflow: hidden;
  -webkit-transition: .2s ease-in-out;
}
.menu li:hover ul li {
  height: 30px;
}

CSS3のtransitionを付けることでヌルッとした動きにアニメーションしています。

矢印のアニメーションについてもhover時にtransform:rotateの値を変えているだけです。

.menu li a:after {
  ~
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -webkit-transition: .2s ease-in-out;
}
.menu li:hover a:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません