BURGER MENU

@charset "UTF-8";
// 共通設定
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box; // padding と border を幅と高さに含める
}

// スクロールは緩やかに
html {
    scroll-behavior: smooth;
}
   
// 基本フォント設定
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

// 箇条書き設定
ul {
    /// 横並び
    &.sidebyside li { display: inline-block; }
}


header {
    width: 100%;
    background-color:  lightblue;
    position: fixed;

    #header-inner
    {
        margin-top: 16px;
        h1, ul {
            font-size: 39px;
            margin: 0;
            padding: 0;
        }
        // 最終リストはバーガーメニュー
        &-rightside {
            height: 60px;
            ul.sidebyside li:last-of-type { margin-left: 10px; }
            a {
                transition: .3s;
            }
        }
    }

    input#navigation {
        display: none;

        // チェックした時の動作
        &:checked {
            // バーガー計上変更
            &~ ul li label.burger span{
                background-color:  #fff;

                &:nth-child(1)
                {
                    -webkit-transform: translateY(10px) rotate(-315deg);
                    transform: translateY(10px) rotate(-315deg);
                }
                &:nth-child(2)
                {
                    opacity: 0;
                }
                &:nth-child(3)
                {
                    -webkit-transform: translateY(-10px) rotate(315deg);
                    transform: translateY(-10px) rotate(315deg);
                }
            }
            
            // メニューではない箇所の表示
            &~ #mask {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .8;
                z-index: 2;
                cursor: pointer;
            }
            
            // 
            &~ nav {
                left: 0;
                opacity: 1;
                height: auto;
                overflow-y: auto;
            }


        }

    }

    .burger {
        display: block;
        position: relative;
        top: 0px;
        right: 0px;
        width: 30px;
        height: 30px;
        transition: all .5s;
        cursor: pointer;
        z-index: 3;

        span {
            display: block;
            position: absolute;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: #333;
            border-radius: 4px;
            transition: all .5s;

            &:nth-child(1) { top: 4px; }
            &:nth-child(2) { top: 14px; }
            &:nth-child(3) { bottom: 4px; }
        
        }
    }

    nav {
        display: block;
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        width: 300px;
        height: 0;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: hidden; //auto
        -webkit-overflow-scrolling: touch;
        transition: all .5s;
        z-index: 3;
        opacity: 0;
    }
      
    nav  {
      padding: 25px;
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
    
        li {
          position: relative;
          margin: 0;
          border-bottom: 1px solid #333;
    
          a {
            display: block;
            color: #333;
            font-size: 14px;
            padding: 1em;
            text-decoration: none;
            transition-duration: 0.2s;
    
            &:hover {
              background: #e4e4e4;
            }
        
          }
     
        }
      }
    }    
}


// フッター固定
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

// メニュー以下の書き出し位置調整
main {
    padding-top: 100px;
}

dl {
    display: inline-block;
    min-width: 200px;
}

footer {
    color: white;
    background-color: aquamarine;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Menu Sample</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="format-detection" content="telephone=no">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" />
        <link rel="stylesheet" href="./css/style.css">
    </head>

<body>
<header>
    <div id="header-inner" class="container d-flex  justify-content-between align-items-center">
        <h1>TITLE</h1>

        <div id="header-inner-rightside">
            <input type="checkbox" id="navigation" />
            <nav>
                <ul>
                    <li><a href="#">Text</a></li>
                    <li><a href="#">Text</a></li>
                    <li><a href="#">Text</a></li>
                </ul>
            </nav>
    
            <ul class="sidebyside">
                <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram-square"></i></a></li>
                <li><a href="#"><i class="fab fa-line"></i></a></li>
                <li>
                    <label class="burger" for="navigation">
                        <span></span>
                        <span></span>
                        <span></span>
                    </label>
                </li>
            </ul>
        
            <label id="mask" for="navigation"></label>
        </div>

    </div>
</header>

    <main class="container">
        01_abcdefghijklmnopqrstuvwkyz</br>
        02_abcdefghijklmnopqrstuvwkyz</br>
        03_abcdefghijklmnopqrstuvwkyz</br>
        04_abcdefghijklmnopqrstuvwkyz</br>
        05_abcdefghijklmnopqrstuvwkyz</br>
        06_abcdefghijklmnopqrstuvwkyz</br>
        07_abcdefghijklmnopqrstuvwkyz</br>
        
        <div class="d-flex flex-wrap justify-content-around">
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
            <dl><dt>Item name</dt><dd>商品情報</dd></dl>
        </div>

    </main>
    <footer>footer</footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>