【CSS】:targetで作るアコーディオンメニュー【webデザイン】

  • LINEで送る

CSSだけでできるアコーディオンメニューを紹介します。今回のポイントは”:target”です。デザインの参考にどうでしょうか。

【CSS】:targetで作るアコーディオンメニュー【webデザイン】

DEMOページ

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください!

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【CSS】:targetで作るアコーディオンメニュー【webデザイン】</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
    <div class="middle">
        <div class="menu">
            <li class="item" id="profile">
                <a href="#profile" class="btn"><i class="far fa-user"></i>Profile</a>
                <div class="smenu">
                    <a href="">Posts</a>
                    <a href="">Picture</a>
                </div>
            </li>
            <li class="item" id="message">
                <a href="#message" class="btn"><i class="far fa-envelope"></i>Message</a>
                <div class="smenu">
                    <a href="">new</a>
                    <a href="">Sent</a>
                    <a href="">Spam</a>
                </div>
            </li>
            <li class="item" id="setting">
                <a href="#setting" class="btn"><i class="fas fa-cog"></i>Setting</a>
                <div class="smenu">
                    <a href="">Password</a>
                    <a href="">Language</a>
                </div>
            </li>
            <li class="item">
                <a href="#" class="btn"><i class="fas fa-sign-out-alt"></i>Logout</a>
            </li>
        </div>
    </div>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    text-decoration: none;
    list-style: none;
    background: #333333;
}
.middle{
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 8px;
    overflow: hidden;
}
.item{
    border-top: 1px solid #C89F12;
    overflow: hidden;
}
.btn{
    display: block;
    padding: 16px 20px;
    background: #C89F12;
    color: #ffffff;
    position: relative;
}
.btn:before{
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: -7px;
    background: #C89F12;
    left: 20px;
    transform: rotate(45deg);
    z-index: 1;
}
.btn i{
    margin-right: 10px;
    background: #C89F12;
}

.smenu{
    background: #0E183B;
    overflow: hidden;
    transition: max-height .3s;
    max-height: 0;
}
.smenu a{
    display: block;
    padding: 16px 26px;
    color: #ffffff;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
    background: #0E183B;
}
.smenu a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    background: #AA9340;
    transition: .3s;
    opacity: 0;
}
.smenu a:hover:before{
    opacity: 1;
}
.item:target .smenu{
    max-height: 11em;
}

 

CSSの解説

その1 黄色のボタン

.btn:before{
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: -7px;
    background: #C89F12;
    left: 20px;
    transform: rotate(45deg);
    z-index: 1;
}
.smenu a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    background: #AA9340;
    transition: .3s;
    opacity: 0;
}

黄色のボタンのアイコンの下の三角形は:beforeの擬似要素で作成しています。.btnを基準にして(position:relative;)、位置を指定しています。元々は四角形ですが、transform:rolate(45deg)で回転させて三角形に見えるようにしています。

.smenuのa:beforeも同じように.smenuを基準にして左端にボーダーを付けています。

 

その2 :targetを使う

<li class="item" id="profile">
     <a href="#profile" class="btn"><i class="far fa-user"></i>Profile</a>                
</li>
.item:target .smenu{
    max-height: 11em;
}

サブメニューがアコーディオンのようにヌルッと出てくる仕組みは:targetを使って設定しています。

:targetとは「リンクのターゲット先となる要素にスタイルを適用できる」と言う性質を持っています。リンク先はid要素で設定します。

例えばリンクタグ<a href=”#box”></a>が押された時、<div id=”box”></div>に:targetで指定したCSSが適用されます。下の場合は「背景が白」を追加しています。↓

:target{
    background: #fff;
}

今回はターゲット先が.itemのdivなので、.itemに:targetを付けて、.smenuのCSSを書き換えています。

.smenuの元々のmax-heightは0ですが、:targetによってmax-heightが11emに書き換わり、サブメニューが表示されます。

 

まとめ

あまり使ったことがなかった:targetですが、javascriptやinputを使わずにアコーディオンが作れるのは知っていて損はないと思います。少し扱いにくいところもありますが、面白い擬似クラスだなと思います。皆さんも一度使ってみてはどうでしょうか?

 

 

 

 

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*