CSS3アニメーションでつくるインターフェイス表現

第2回 アコーディオンメニューのアニメーション

この記事を読むのに必要な時間:およそ 4 分

メニューの開け閉じの動きを加える

いよいよ,アコーディオンメニューに開け閉じの動きを加えよう。縦に伸び縮みさせるので,つぎのようにサブメニュー項目の<a>要素に対してheightプロパティを用いる。初めはつぶしておき(0⁠⁠,メニュー項目class属性"item")にマウスポインタが重なったら:hover擬似クラス)高さを戻せばよい。そして,transitionプロパティで,アコーディオンの名前通りの滑らかなアニメーションとした(第1回のボタンに滑らかなアニメーションを定めるの項参照⁠⁠。

.item ul li a {

    height: 0;

    transition: 0.5s;
}
.item:hover ul li a {
    height: 30px;
}

transitionプロパティに「タイミング関数」timing-functionを定めると,アニメーションの動き方が変えられる。簡単に使うには,予め備わっている7つのキーワードから選べばよい。デフォルト値は,始めは加速して終わりに減速するease図4左⁠⁠。MDN「timing-function」一般的なタイミング関数のキーワードの項に7つのキーワードとそのグラフが掲げられているので,興味があれば試してみるとよいだろう。このお題ではeaseよりもう少しめりはりの効いたease-in-outを加える図4右⁠⁠。

.item ul li a {

    transition: 0.5s ease-in-out;
}

図4 タイミング関数のeaseとease-in-out

ease(デフォルト)

図4 ease(デフォルト)


ease-in-out

図4 ease-in-out

この図Mozilla Contributorsによるもので、CC-BY-SA 2.5のもとで利用が許諾されています。

メニュー項目の間に区切り線を入れる

アコーディオンメニューを閉じたとき,項目の間の区切りがわからないのは少し気になる図5⁠。そこで,メニュー項目class属性"item")border-topプロパティで,以下のコードのように区切り線を入れることにしよう。

図5 メニュー項目の間に区切りがない

図5 メニュー項目の間に区切りがない

.item {

    border-top: 1px solid white;

}

確かめてみると,メニュー項目の間だけでなく,アコーディオンメニュー上端にも線が入ってしまう図6⁠。この線は余計だ。そこで以下のコードのように,プルダウンメニューclass属性"menu")の項目class属性"item")のうち最初の<li>要素を:first-child擬似クラスで指定して,その線は消すnoneこととした。これで,アコーディオンメニューの項目の間にだけ区切り線が入った図7⁠。

図6 アコーディオンメニュー上端の線が余計

図6 アコーディオンメニュー上端の線が余計

.menu li.item:first-child {
    border-top: none;
}

図7 アコーディオンメニューの項目の間にだけ区切り線が入った

図7 アコーディオンメニューの項目の間にだけ区切り線が入った

サブメニュー項目にポインタを重ねたときハイライトさせる

仕上げに,サブメニュー項目にマウスポインタを重ねたとき,背景色を変えてハイライトさせよう。サブメニュー項目の<a>要素の:hover擬似クラスで,つぎのようにbackgroundプロパティのカラーを定めた。また,サブメニュー項目の文字色は濃いグレーにしてあったので,そのカラーも黒に変えている。これで,マウスポインタを重ねたサブメニュー項目がハイライトする図8⁠。これで,アコーディオンメニューのアニメーションはでき上がった。CSSの定めは以下のコード1にまとめたとおりだ。

.item ul li a:hover {
    background: lightsteelblue;
    color: black;
}

図8 アコーディオンメニューのサブメニュー項目にマウスポインタを重ねるとハイライトする

図8 アコーディオンメニューのサブメニュー項目にマウスポインタを重ねるとハイライトする

コード1 アコーディオンメニューのアニメーション

* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px sans-serif;
}
#container {
    margin: 50px auto 0;
    width: 200px;
}
.menu {
    width: 200px;
    list-style: none;
    border-radius: 20px;
    border: 1px solid darkgray;
    background: linear-gradient(to bottom, whitesmoke, silver);
    box-shadow: 0px 4px 10px darkgray;
}
.item {
    overflow: hidden;
    border-top: 1px solid white;
    cursor: pointer;
}
.menu li.item:first-child {
    border-top: none;
}
.item a span {
    display:block;
    padding:10px 10px 10px 20px;
    color: black;
}
.item ul li a {
    display: block;
    padding-left: 20px;
    line-height: 30px;
    height: 0;
    text-decoration: none;
    font-size: 14px;
    background: white;
    color: darkslategray;
    transition: 0.5s ease-in-out;
}
.item:hover ul li a {
    height: 30px;
}
.item ul li a:hover {
    background: lightsteelblue;
    color: black;
}
#bottom {
    display:block;
    padding:10px 10px 10px 20px;
    cursor: default;
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書