【menuQ.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menuQ.css">
<script src="menuQ.js"></script><!-- 共通化メニューを読込む -->
</head>
<body>
<header>
<input type="checkbox" name="navToggle" id="navToggle">
<label for="navToggle" class="btn-burger">
<span class="icon"></span>
</label>
<nav id="qnav"></nav>
<script>
document.getElementById('qnav').insertAdjacentHTML('beforeend', menutxt);
</script>
</header>
<main>メイン</main>
<footer>footer</footer>
</body>
</html>
【menuQ.js】
let menutxt =" <ul class='nav-list'>";
menutxt +=" <li><a href='#'>menu 1</a></li>";
menutxt +=" <li><a href='#'>menu 2</a></li>";
menutxt +=" <li><a href='#'>menu 3</a></li>";
menutxt +=" <li><a href='#'>menu 4</a></li>";
menutxt +=" <li><a href='#'>menu 5</a></li>";
menutxt +=" </ul>";
【menuQ.css】
.btn-burger { /*ハンバーガーボタン */
background-color:#eee; cursor: pointer;
display:block; width:56px; height:60px;
position: absolute; top:5px; right:10px; z-index:10;
}
.icon, .icon:before, .icon:after { /*ハンバーガー 三本線 */
position:absolute; top:0; bottom:0; margin: auto;
right:0; left:0; height:4px; width:35px;
background-color:#444; border-radius: 2px;
display:block; content:''; cursor:pointer;
}
/*三本線の間隔 */
.icon:before { top: 16px; }
.icon:after { top: -26px; }
#navToggle { display:none; } /* チェックボックス非表示 */
/* チェックをクリックしたら */
#navToggle:checked ~ .btn-burger .icon {
background: transparent; }
#navToggle:checked ~ .btn-burger .icon:before {
transform: rotate(-45deg); top: 0; }
#navToggle:checked ~ .btn-burger .icon:after {
transform: rotate(45deg); top: 0; }
.icon, .icon:before, .icon:after { transition: all .8s; }
#qnav { /* メニューの中身 */
position: fixed; width: 30%; overflow: hidden;
transform: translateX(-50vw); transition: 1s;
z-index: 1; }
.nav-list {
background-color: #5c55e7; list-style: none;
margin: 0; padding-left: 20px; }
.nav-list li { margin: 0; padding: 8px; }
.nav-list a { display: block;
text-decoration: none; color: #fff; }
#navToggle:checked ~ #qnav {
transform: translateX(8px) ; }
main{ height: calc(100vh - 45px ); background-color: #efe;}
@media screen and (min-width: 768px) {
.btn-burger { display: none; } /* ハンバーガーは不使用 */
#qnav { width: 80%; margin: 0 auto;
position:relative; transform:translateX(0); }
.nav-list { display: flex; justify-content: center;
align-items: center; height: 50px; }
.nav-list li:not(:last-child) { border-right: 1px solid #fff; }
.nav-list a {width: 100px; text-align: center; }
main{ height: calc(100vh - 94px ); }
}