ポップアップ(ドロップダウン) メニューにアニメーションの動作を追加する - CSS

CSSで実装したポップアップメニューにアニメーション効果をつけるコードを紹介します。

概要

こちらの記事で作成したポップアップメニューにアニメーションを追加するコードを紹介します。

コード

popupmenu04.css

#menu {
  list-style: none;
  padding: 0px 0px 0px 0px;
}

#menu>li {
  display: block;
  position: relative;
  float: left;
  background-color:#808080;
  color: #ffffff;
  padding: 5px 15px 5px 15px;
}

#menu>li>a {
  text-decoration:none;
  color: #ffffff;
}

#menu>li:hover {
  background-color: #ff6a00;
}

#menu>li>ul { 
  display: block; 
  position: absolute;
  list-style: none;
  padding: 0px 0px 0px 0px;
  z-index:10;
  margin-top:5px;
  margin-left:-15px;
}

#menu>li:hover>ul>li {
  float: none;
}

#menu > li > ul > li > a {
  background: #ff6a00;
  padding: 5px 15px 5px 15px;
  transition: .2s;
}

#menu>li:hover>ul>li>a:hover { 
  background: #ff0000; 
}

#menu>li>ul>li {
  height: 0px;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}

#menu>li:hover>ul>li{
  height:28px;
}

#menu>li>ul>li>a {
  display: none;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
}

#menu>li:hover>ul>li>a {
  display: block;
}

popupmenu04.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="popupmenu04.css" />
</head>
<body>
  <ul id="menu">
    <li>
      <a href="">メニュー1</a>
      <ul>
        <li><a href="">サブメニュー1-1</a></li>
        <li><a href="">サブメニュー1-2</a></li>
        <li><a href="">サブメニュー1-3</a></li>
      </ul>
    </li>
    <li>
      <a href="">メニュー2</a>
      <ul>
        <li><a href="">サブメニュー2-1</a></li>
        <li><a href="">サブメニュー2-2</a></li>
      </ul>
    </li>
    <li>
      メニュー3
      <ul>
        <li><a href="">サブメニュー3-1</a></li>
        <li><a href="">サブメニュー3-2</a></li>
        <li><a href="">サブメニュー3-3</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

解説

HTML部分についてはこちらのページを参照してください。

CSSについては基本はこちらの記事で紹介しているものと同じです。
CSSでのアニメーションでは、非表示の要素を表示に変えた場合はアニメーションできないため、ポップアップしていない状態のメニューは"display: none;"ではなく、"height: 0px;"としています。マウスオーバーした際にheightプロパティを本来の大きさに設定することでメニューがエクスパンドするアニメーションを実現しています。

#menu>li>ul>li {
  height: 0px;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}

#menu>li:hover>ul>li{
  height:28px;
}

ドロップダウンのメニュー要素にもアニメーション設定を記述しています。メニューにマウスオーバーした際ハイライトカラーがアニメーションで変化します。

#menu>li {
  display: block;
  position: relative;
  float: left;
  background-color:#808080;
  color: #ffffff;
  padding: 5px 15px 5px 15px;
}

#menu>li>a {
  text-decoration:none;
  color: #ffffff;
}

#menu>li:hover {
  background-color: #ff6a00;
}