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

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

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

今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると,サブメニューが広がる。また,サブメニュー項目は,マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると,jQueryを使った作例が多くリストされるだろう。だが,JavaScriptは使わず,CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。

サンプル1 CSS3:Accordion menu by rollover

メニューのもとになる静的スタイル

まず,<body>要素に書くコードの構成だ。アコーディオンメニューは,つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として,サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で,メニュー項目も含め,テキストは子の<a>要素に加えた。そして,アコーディオンメニューの<ul>要素全体を,class属性"container"の<div>要素で包んだ。

<div id="container">
<ul class="menu">
    <li class="item">
        <a id="menu01"><span>メニュー項目1</span></a>
        <ul>
            <li><a href="#">サブメニュー項目1</a></li>
            <li><a href="#">サブメニュー項目2</a></li>
            <!-- サブメニュー項目の<li>要素続く -->
        </ul>
    </li>
    <li class="item">
        <a id="menu02"><span>メニュー項目2</span></a>
        <ul>
            <!-- サブメニュー項目の<li>要素続く -->
        </ul>
    </li>
    <!-- メニュー項目の<li>要素続く -->
</ul>
</div>

メニューの項目のテキストやリンクを加えたのがつぎのコードだ。メニュー項目はふたつ,サプメニュー項目はそれぞれ3つとふたつにした。最後のclass属性"item"の<li>要素は,アコーディオンメニューの下端の縁にするので,メニュー項目ではない(中にid属性"bottom"の<span>要素を加えた)。

<div id="container">
<ul class="menu">
    <li class="item">
        <a id="menu01"><span>リファレンス</span></a>
        <ul>
            <li><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference" target="_blank">JavaScriptリファレンス</a></li>
            <li><a href="https://developer.mozilla.org/docs/Web/CSS/Reference" target="_blank">CSSリファレンス</a></li>
            <li><a href="http://semooh.jp/jquery/" target="_blank">jQueryリファレンス</a></li>
        </ul>
    </li>
    <li class="item">
        <a id="menu02"><span>gihyo.jp</span></a>
        <ul>
            <li><a href="http://gihyo.jp/design/serial/01/createjs" target="_blank">CreateJS</a></li>
            <li><a href="http://gihyo.jp/design/serial/01/away3d-typescript" target="_blank">Away3D TypeScript</a></li>
        </ul>
    </li>
    <li class="item">
        <span id="bottom"></span>
    </li>
</ul>
</div>

この<body>要素の記述に対して,つぎのような<style>要素を加える。今のところ,アコーディオンメニューは開いたまま動かず,マウスポインタを重ねた項目のハイライトといったアニメーションもない図1)。なお,CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んだ(第1回のベンダープレフィックスと-prefix-freeの項参照)。

<script src="lib/prefixfree.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px sans-serif;
}
#container {
    margin: 50px auto 0;
    width: 200px;
}
.menu {
    width: 200px;
    list-style: none;
    border: 1px solid darkgray;
    background: silver;
}
.item {
    overflow: hidden;
    cursor: pointer;
}
.item a span {
    display:block;
    padding:10px 10px 10px 20px;
    color: black;
}
.item ul li a {
    display: block;
    padding-left: 20px;
    line-height: 30px;
    text-decoration: none;
    font-size: 14px;
    background: white;
    color: darkslategray;
}
#bottom {
    display:block;
    padding:10px 10px 10px 20px;
    cursor: default;
}
</style>

図1 アコーディオンメニューのもととなるスタイル

図1 アコーディオンメニューのもととなるスタイル

メニューに角の丸みと影を加える

アコーディオンメニューを動かす前に,もう少し飾りつけよう。アコーディオンメニューclass属性"menu")<ul>要素の4つ角は丸めて,ドロップシャドウを加える図2)。プロパティborder-radiusに角丸の半径,box-shadowには影の水平・垂直のずれとぼけ幅および色をつぎのように定めた(第1回のボタンの角に丸みを加えるおよび影でボタンを立体的に見せるの項を参照)。

.menu {

    border-radius: 20px;

    box-shadow: 0px 4px 10px darkgray;
}

図2 アコーディオンメニューに角の丸みと影を加えた

図2 アコーディオンメニューに角の丸みと影を加えた

さらに,アコーディオンメニューの背景色は線形のグラデーションにする。この場合にカラーを定めるのが,linear-gradient()関数だ。引数には,つぎのようにグラデーションの向きと,始まりおよび終わりの色を与える。

linear-gradient(to 方向, 始まりの色, 終わりの色)

アコーディオンメニューclass属性"menu")<ul>要素のbackgroundプロパティは,つぎのように色をlinear-gradient()関数に書き替えて,背景色は上から下へのグレーのグラデーションにした図3)。

.menu {

    background: linear-gradient(to bottom, whitesmoke, silver)/* silver */;

}

図3 アコーディオンメニューの背景色にグラデーションが掛かった

図3 アコーディオンメニューの背景色にグラデーションが掛かった

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入