【HTML／CSS】マウスポインタを上に載せたときに、自動で開くメニューの作り方【クックブック】

マウスポインタを上に載せたときに、メニューバーが開き、マウスポインタを外すとメニューバーが閉じるような動きのあるメニューだとカッコいいですよね。

実はCSSで作成できるんです。

さっそく実装
さいごに

さっそく実装

HTMLはこんな感じ。
<nav>～</nav>の間がメニュー部分ですね。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#"><img src="icon1.svg" />link1</a></li>
                <li><a href="#"><img src="icon1.svg" />link2</a></li>
                <li><a href="#"><img src="icon1.svg" />link3</a></li>
                <li><a href="#"><img src="icon1.svg" />link4</a></li>
            </ul>
        </nav>
        <div id="main">
            <h1>test now</h1>
        </div>
    </body>
</html>

続いて、以下がCSS。

いろいろと書いてはいますが、ポイントは、navにhover（カーソルの載せたとき）したときにwidthを変更して広げているだけ。

カーソルを載せる前は、アイコン画像の幅のサイズに設定しておいて、カーソルを合わせたらメニュー文言まで表示できる幅に広げることで動きのあるメニューを実現しています。

#main {
    float: left;
    width: 100%;
    text-align: center;
    background-color: darksalmon;
}
nav {
    position: fixed;
    float: left;
    background-color: aqua;
    height: 100%;
    width: 90px;
    margin-left: -30px;
    overflow: hidden;
    transition: width 0.3s ease-out;
    -webkit-transition: width 0.3s ease-out;
}
nav ul {
    list-style: none;
}
nav ul li {
    white-space: nowrap;
    line-height: 52px;
}
nav:hover {
    width: 200px;
}
nav img {
    height: 32px;
    width: 32px;
    margin-right: 20px;
}

さいごに

今回紹介した例は、左サイドにメニューがある形ですが、ポイントが理解できれば十分に応用の効くものだと思います。

少しでも参考になれば幸いです。