CSS入門 | CSS応用 | ドロップダウン効果

Tags:

ドロップダウン効果

対象の要素にマウスを乗せると別の要素やテキストが表示される効果を、ドロップダウン（dropdown）効果という。
CSSを利用すると、このようなドロップダウン効果を簡単に設定できる。

次の例は、displayプロパティを利用してドロップダウン効果を実装する例である。

<style>
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #F9F9F9;
        min-width: 160px;
        padding: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown:hover .dropdown-content { display: block; }
</style>

上の例では、ユーザーがマウスを乗せたときに表示される <div> 要素のdisplayプロパティ値を none に設定している。 このように設定すると、最初は目に見えない状態になる。

しかし、特定の要素にマウスを乗せると、その <div> 要素のdisplayプロパティ値がブロック（block）に変更される。 そのため、このとき <div> 要素が目に見えるようになる。

ドロップダウンメニュー

メニューにマウスを乗せるとサブメニューが表示されるメニューを、ドロップダウン（dropdown）メニューという。 ドロップダウン効果を利用すると、このようなドロップダウンメニューも簡単に実装できる。

<style>
    .dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #FFDAB9;
        min-width: 70px;
        padding: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
    .dropdown-content a:hover { background-color: #CD853F; }
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>

上の例でも前の例と同様に、対象要素のdisplayプロパティを利用してドロップダウンメニューを実装している。