CSS3でアコーディオンメニュー

作成日 2021.01.13
更新日 2022.03.01
CSS

CSS3のみで、JavaScriptに依存せずにスムーズに動くアコーディオンメニューを実装する簡単なサンプルコードを記述してます。

1. 環境
2. アコーディオンメニュー
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

アコーディオンメニュー

アコーディオンメニューは親要素をhoverしたときに子要素が　display: table;で開くシンプルな形です。その際transitionプロパティを使用することで動きをスムーズにしています。

/*動作の基本となるcss*/

.menu li li a {
   display: block;
   margin-top: 0;
   padding: 0 10px;
   height: 0;
}
.menu > li:hover li a {
   display: table;
   margin-top: 1px;
   padding: 16px 10px;
   width: 100%;
}
.menu * {
   -moz-transition: .3s;
   -webkit-transition: .3s;
   -o-transition: .3s;
   -ms-transition: .3s;
   transition: .3s;
}

<!--基本のHTML-->

<ul class="menu">
    <li>
        <a href="#">メニュー1</a>
        <ul>
            <li><a href="#">サブメニュー</a></li>
            <li><a href="#">サブメニュー</a></li>
        </ul>
    </li>
</ul>

サンプルコード

以下は実際に、アコーディオンメニューを実装したサンプルコードとなります。


<section>   
    <style>
        .samplemenu {
        margin: 0;
        padding: 0;  
        }
        .samplemenu li {
        list-style: none;
        font-weight:bold;
        width: 300px;
        }
        .samplemenu li a {
        display: table;
        margin-top: 1px;
        padding: 16px 10px;
        width: 100%;
        background: #43b917;
        text-decoration: none;
        text-align: left;
        color:#fff;
        overflow: hidden;
        }
        .samplemenu li ul {
        margin: 0;
        padding: 0;
        }
        .samplemenu li li a {
        display: block;
        margin-top: 0;
        padding: 0 10px;
        height: 0;
        background: #909090;
        color: #fff;
        }
        .samplemenu > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 16px 10px;
        width: 100%;
        }
        .samplemenu * {
        -moz-transition: .3s;
        -webkit-transition: .3s;
        -o-transition: .3s;
        -ms-transition: .3s;
        transition: .3s;
        }    
    </style>

    <ul class="samplemenu">
        <li>
        <a href="#">メニュー1</a>
        <ul>
            <li><a href="#">サブメニュー</a></li>
            <li><a href="#">サブメニュー</a></li>
        </ul>
        </li>
        <li>
        <a href="#">メニュー2</a>
        <ul>
            <li><a href="#">サブメニュー</a></li>
            <li><a href="#">サブメニュー</a></li>
            <li><a href="#">サブメニュー</a></li>
        </ul>
        </li>
        <li>
        <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>
    </ul>

</section>

ブラウザ上で表示した結果