ハンバーガーメニューをCSSで作る

投稿者: | 2022-01-01
0件のコメント
grayscale photo of computer laptop near white notebook and ceramic mug on table

各局皆様、こんにちは。アマチュア無線局、JS2IIUです。

ハンバーガーメニューをCSSだけで作る方法を残しておきます。

目次

完成イメージ

画面左上にハンバーガーメニューがあります。ウェブブラウザはChromeを使っています。画面の右側はデベロッパーツールを表示させています。表示の仕方は、【表示】→【開発/管理】→【デベロッパーツール】です。今回の内容には直接関係ないので、表示させる必要はありません。

ハンバーガーメニューをクリックするとメニューが展開されます。左からニョろんと出てきます。

HTMLソース

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My CSS Test Html</title>
        <link rel="preconnect" href="https://fonts.googleapis.com"> 
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
        <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
        <link href="./index-2.css" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="hamburger-menu">
                <input type="checkbox" id="menu-btn-check">
                    <label for="menu-btn-check" class="menu-btn"><span></span></label>
                </input>
                <div class="menu-content">
                    <ul>
                        <li>
                            <a href="#">Top Menu</a>
                        </li>
                        <li>
                            <a href="#">Sub Menu</a>
                        </li>
                        <li>
                            <a href="#">Hidden Menu</a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <h1>ハンバーガーメニュー</h1>


        
    </body>
</html>

CSSソース


body {
    font-family: 'Lora', serif;

}

h1 {
    margin-left: 100px;
}

/*--- ハンバーガーメニュー　ここから ---*/
.menu-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #eeeeee;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #000000;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check {
    display: none;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255,255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

.menu-content {
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -350px;
    z-index: 80;
    /*--- メニュー部分の背景色 ---*/
    background-color: #eeeeee;
    transition: all 0.5s;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    /*--- メニュー枠、下線の色 ---*/
    border-bottom: solid 1px #000000;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    /*--- メニューの文字色 ---*/
    color: #000000;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    /*--- メニュー右端、矢印色 ---*/
    border-top: solid 2px #000000;
    border-right: solid 2px #000000;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
#menu-btn-check:checked ~ .menu-content {
    /*--- 画面外に置いていたメニューを表示させる、位置の指定 ---*/
    left: 0px;
}
/*--- ハンバーガーメニュー　ここまで ---*/


/*---  ---*/

参考

最後まで読んでいただきありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です