VBA HTML

< !DOCTYPE HTML>
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< meta http-equiv="content-language" content="ja" />
< meta http-equiv="X-UA-Compatible" content="IE=edge">

< /head>
< body>< !-- onclick="gauge1()" onload="gauge1()"-->

< div id="header">
< div id="humberger"onclick="menuSlide()">
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
< p style="margin-top: 15px;margin-left: 60px;font-size: 20px;color: white;">AAAAAAAA< /p>
< /div>






< div id="menu">
< ul class="listCss" id="listID">
< li onclick="frmChange('1map.html')">< p>AAAA< /p>< /li>
< li onclick="frmChange('2GoogleApi.html')">< p>BBBB< /p>< /li>
< li onclick="">< p>CCCC< /p>< /li>
< li onclick="">< p>DDDD< /p>< /li>
< li onclick="">< p>EEEE< /p>< /li>
< /ul>
< /div>
< div id="menusheet" onclick="menuSlide()"style="visibility:hidden;">< /div>

< div >
< iframe id="frm" name="main" width="100%" src="1map.html" frameborder="0"scrolling="yes" style="margin-top: 50px;">< /iframe>
< /div>




< script type="text/javascript">

function frmChange(URL){
document.getElementById("frm").src=URL
menuSlide()
}


function menuSlide(){
if(document.getElementById("menusheet").style.visibility=="hidden"){
document.getElementById("menu").style.left=0;
document.getElementById("menusheet").style.visibility="visible";
}else{
document.getElementById("menu").style.left=-255+"px";
document.getElementById("menusheet").style.visibility="hidden";
}
};


// 子画面の要素を取得
var elm = document.getElementById("frm");

// 子画面のコンテンツサイズに合わせてサイズを変更する関数
function changeParentHeight(){
//alert(window.innerHeight-64+ "px")
//alert(document.body.scrollHeight-64+ "px" )
elm.style.height =window.innerHeight-50+ "px";
}

// 親画面 iframe の高さを変更するイベント
// 1. 子画面の読み込み完了時点で処理を行う
window.onload = function(){ changeParentHeight() };
elm.contentWindow.onload = function(){ changeParentHeight() };

// 2. 子画面のウィンドウサイズ変更が完了した時点で処理を行う
var timer = 0;
window.onresize = function () {
if (timer > 0) {
clearTimeout(timer);
}
timer = setTimeout(function () {
changeParentHeight()
}, 100)
};
< /script>


< style>


body {
background-color: #ffffff;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
height:100%;
overflow: hidden;
/* padding-top: 64px; */
}

#header {
background-color: #34495e;
height: 50px;
/* margin-bottom: 110; */
position: fixed;
width: 100vw;
z-index: 100;
/* margin-top: -70px; */
background-color: #4a80b7;
box-shadow: 0px 2px 12px 1px #9E9E9E;
}


#humberger {
position: absolute;
height: 16px;
width: 24px;
display: inline-block;
box-sizing: border-box;
top: 17px;
left:15px;
float:left;
cursor: pointer;
}
#humberger div {
position: absolute;
left: 0;
height: 2px;
width: 24px;
background-color: white;
border-radius: 2px;
display: inline-block;
box-sizing: border-box;
}
#humberger div:nth-of-type(1) { top: 0;}
#humberger div:nth-of-type(2) {top: 7px;}
#humberger div:nth-of-type(3) {bottom: 0;}
#menu{position:fixed;top:0;left:-260px;width:250px;height:100vw;background-color:#322e2e;z-index:99;transition: left 0.5s;text-align: center;}
#menusheet{position:fixed;top:0;left:0;width:100%;height:100vw;background-color:#00000061;z-index:95;transition-duration:0.5s;cursor: pointer;}


.listCss {
list-style: none;
overflow: hidden;
width: 250px;
padding: 0;
margin-top: 100px;
}
.listCss li {
list-style: none;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid #879c18;
}
.listCss li:last-child {
border-bottom: 0px;
}
.listCss li p {
display: block;
position: relative;
z-index: 10;
height: 40px;
margin: 0;
padding: 0px 10px 0px 30px;
background: #322e2e;
color: #fff;
font-size: 14px;
line-height: 40px;
font-weight: bold;
text-decoration: none;
}
.listCss li p:hover {
cursor: pointer;
background: gray;
}
#listID li p:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 25px;
width: 0;
height: 0;
margin-top: -5px;
border: 5px solid transparent;
border-left: 5px solid #fff;
}


< /style>





< /body>
< /html>