【menuR.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menuR.css" type="text/css">
<script src="menuR.js"></script><!-- メニューの共通化 -->
</head>
<body>
<section id="snav">
<input type="checkbox" id="label1" >
<label for="label1"></label>
</section>
<script>
document.getElementById('snav').insertAdjacentHTML('beforeend', nlist);
</script>
<main>
メイン
</main>
<footer>footer</footer>
</body>
</html>
【menuR.js】
nlist ="";
nlist +="<ul class='nav-list'>";
nlist +=" <li><a href='index.html' >MENU 1</a>";
nlist +=" <ul class='nav-list-ul'>";
nlist +=" <li><a href='#'>MENU 11</a></li>";
nlist +=" <li><a href='#'>MENU 12</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 121</a></li>";
nlist +=" <li><a href='#'>MENU 122</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 13</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 2</a>";
nlist +=" <ul class='nav-list-ul'>";
nlist +=" <li><a href='#'>MENU 21</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 211</a></li>";
nlist +=" <li><a href='#'>MENU 212</a></li>";
nlist +=" <li><a href='#'>MENU 213</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 22</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 221</a></li>";
nlist +=" <li><a href='#'>MENU 222</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 23</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 3</a></li>";
nlist +=" <li><a href='#'>MENU 4</a>";
nlist +=" <ul class='nav-list-ul'>";
nlist +=" <li><a href='#'>MENU 41</a></li>";
nlist +=" <li><a href='#'>MENU 42</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 421</a></li>";
nlist +=" <li><a href='#'>MENU 422</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 5</a>";
nlist +=" <ul class='nav-list-ul'>";
nlist +=" <li><a href='#'>MENU 51</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 511</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" <li><a href='#'>MENU 52</a></li>";
nlist +=" <li><a href='#'>MENU 53</a>";
nlist +=" <ul>";
nlist +=" <li><a href='#'>MENU 531</a></li>";
nlist +=" <li><a href='#'>MENU 532</a></li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +=" </ul>";
nlist +=" </li>";
nlist +="</ul>";
【menuR.css】
#snav{ position:relative; z-index:100; }
#snav input { display:none; } /*チェックは不可視 */
.nav-list{ transition:0.5s; position:relative; top:0; padding-left:0px; display:flex; justify-content: center; max-width: 800px; margin: 0px auto; }
.nav-list li { position:relative; width:18%; margin:0; padding:0; text-align:center; z-index:100; list-style:none; }
.nav-list li a{ border-radius:5px; background:#06b; color:#fef; display:block; margin:1px; padding: 3px 0 1px; text-decoration:none; height: 28px; line-height: 2; font-size: 14px; font-weight: bold; }
.nav-list li:hover > a{ background:#4ac; }
.nav-list li ul li{ overflow:hidden; width:100%; height:0; margin:0px; color:#fef; transition:.3s;}
.nav-list li ul li a{ background:#48b; }
.nav-list li:hover li:hover > a{ background:#4ab; }
.nav-list li ul{ position:absolute; top:100%; left:0; width:100%; margin:0; padding:0; }
.nav-list li ul li{ overflow:hidden; width:100%; height:0; color:#ffe; transition:.4s; }
.nav-list li:hover > ul > li{ overflow: visible; height: 32px;}
.nav-list li ul li ul{ top: 0; left:100%; }
.nav-list li ul li ul:before{ /* ul 直前に指定 */
position: absolute; content: ""; top: 9px; left: -12px;
width: 0; height: 0; border: 8px solid transparent;
border-left-color: #eee; /* 三角マーク色 */
}
main{background-color: #ffd; height:calc(10vh - 5vh - 0px);}
footer{background-color: #dfd; height: 5vh;}
@media screen and (min-width:960px) { /* pc用 */
.nav-list{ width:950px; }
.nav-list li:last-child ul li ul{left: -100%; width:100%;}
.nav-list li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
.nav-list li:last-child ul li ul:before{ /* 右端リストの三角マーク ul 直前に指定 */
position:absolute; content:""; top:9px; left: 100%; margin-left: -4px;
border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
}
/* 右端前リストの三角マーク */
.nav-list li:nth-last-child(2) ul li ul:before {
position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px;
border: 8px solid transparent; border-right-color:#eee;
}
}
@media (min-width:560px) and ( max-width:959px) { /* タブレット用 */
.nav-list{ width:98%; }
.nav-list li:last-child ul li ul{left: -100%; width:100%;}
.nav-list li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
.nav-list li:last-child ul li ul:before{ /* 右端リストの三角マーク ul 直前に指定 */
position:absolute; content:""; top:9px; left:100%; margin-left:-4px;
border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
}
/* 右端前リストの三角マーク */
.nav-list li:nth-last-child(2) ul li ul:before {
position:absolute; content:""; top:9px; left:100%; margin-left:-4px;
border: 8px solid transparent; border-right-color:#eee;
}
}
@media (max-width:559px) { /* スマホ用 */
#snav label { padding: 0px 6px 12px; font-size:30px; background:#84b; opacity:1; border-radius:6px; cursor:pointer; position:fixed; top:10px; right:10px; height: 1em; } /*ボタン枠装飾*/
.nav-list { top: -300px ;}
#snav input { display:none; } /*チェックは不可視 */
#snav input:checked ~ .nav-list{ transform:translate(0, 300px); transition:0.5s; } /* 中身を表示 クリックで中身非表示 */
#snav input:checked ~ label:before { display:inline-block;color:#fff; content:'\02715'; } /* '三'; '\f078'; */
#snav label:before{ color:#dfe; font-weight:bold; content:'\02630'; } /* 'Ｘ \f00d' */
.nav-list{ position: fixed; width:33vw; margin:3em auto 0 0.5em; display:flex; flex-direction:column; z-index:90; }
.nav-list li ul:before{ position: absolute; content: ""; top: 9px; left: -12px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #eee; } /* ul 直前三角マーク色 */
.nav-list li{ width: 95%; margin:0 auto; padding: 0; text-align:center; }
.nav-list li ul{ top:3px; left:100%; }
}