Travelogue

CSSだけで作る超簡単ドロップダウンメニュー

公開日：

CSSだけで作る超簡単でシンプルなドロップダウンメニューのコードを紹介します。
仕組みを分かりやすくするために、また、それぞれのWebサイトに合わせてアレンジしやすいように、ものすごくシンプルに必要な部分だけのコードにしてあります。

<ul>
    <li class="item"><a href="#">親アイテム</a>
        <ul class="child">
            <li><a href="#">子アイテム</a></li>
            <li><a href="#">子アイテム</a></li>
        </ul>
    </li>
</ul>

HTMLでは、上の階層のliにitemというクラスを付与。その中にサブ階層用のulを書き、これにchildというクラスを付与します。
上の階層のliをひとつしか書いてませんが、必要な数だけ増やしfloat等で横並びにするなど、自由にアレンジしてください。

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.item {
    position: relative;
}

.item a {
    display: block;
    line-height: 60px;
    text-align: center;
    background: #ddd;
}

.child {
    visibility: hidden;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0px;
}

.item:hover .child {
    visibility: visible;
}

ドロップダウンのために必要なCSSはこれだけです。
一番上でulをリセットしていますが、他のところでリセットしているならこれは書かなくていいです。

.childを初期状態ではvisibilityで非表示にしておいて、.itemがホバーになった時に表示させます。
この時の表示位置を.childのpositionプロパティで指定しますが、その基準点にするために.itemにrelativeを指定します。

line-heightの60pxはメニュー項目の高さです。heightでもいいんですが、line-heightにすると中のテキストの縦位置が中央になるのでこのようにしてあります。.childのtopをこれに合わせて60pxにしてあります。

大事な部分は以上ですが、これだけだとあまりにも味気ないので、opacityやtransitionを加えてフワッと出現させたりすると良いと思います。

Pagetop