<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>レスポンシブルメニューヘッド</title>
<meta charset="Shift_JIS">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
/* 文字コード UTF-8 */
header{ width:100%; margin:0; z-index:10; }
#top{ display:flex; text-align: center; height:55px; }
#topL{ flex:1; }
#topC{ flex:8; font-size:36px; color:#900; font-weight: bold; }
#topR{ flex:1.5; font-size:12px; }
#gnav-wrap{ box-sizing:border-box; width:100%; height:33px; margin: 0 auto; }
.gnav-btn{ position:absolute; width:34px; height:32px; top:2px; left:5px; color:#333;
line-height:32px; border-radius:4px; text-align:center; cursor:pointer;
right:5px; background:#4b8; font-size:30px; border:1px solid #fff; z-index:10; }
.gnav-btn:hover{ background:#4d8;}
.highlight{ color:#ffe;}
.gnav { display:flex; list-style:none; padding:0; }
.gnav ul { list-style:none; }
.gnav li { position:relative; width:19vw; margin: 0; text-align: center; }
.gnav img { width:98%; height:100%; }
.gnav li a{ border-radius:5px; background: #185; color: #eff; overflow:hidden;
display: block; margin:1px 1px 1px 0; padding: 2px 0; text-decoration: none;
height: 28px; line-height:2.3em; font-size:13px; font-weight: bold;
}
.gnav li:hover > a{ background:#1b5; }
.gnav li ul li{ overflow:hidden; width:100%; height:0; margin:0px; transition:.4s;}
.gnav li ul li a{ background:#092; }
.gnav li:hover li:hover > a{ background:#5a8; }
.gnav li ul{ position:absolute; top:100%; left:0; width:100%; margin:0; padding:0; }
.gnav li ul li{ overflow:hidden; width:100%; height:0; color:#ffe; transition:.4s; }
.gnav li:hover > ul > li{ overflow: visible; height: 32px;}
.gnav li ul li ul{ top: 0; left: 100%;}
.gnav li ul li ul:before{ /* ul 直前に三角配置 */
position:absolute; content: ""; top:8px; left:-11px; width: 0; height: 0;
border: 9px solid transparent; border-left-color: #eee; /* 三角マーク色 */
}
@media screen and (min-width:600px) { /* pc用 */
.gnav-btn{ display:block; opacity:0.1; } /* or display:none; */
.gnav{ width:80%; margin:0 auto; }
.gnav>li:last-child ul li ul{left: -100%; width: 100%;}
.gnav>li:nth-last-child(2) ul li ul {left: -100%; width:100%;}
.gnav>li:last-child ul li ul:before{ /* 右端リストの三角マーク */
position:absolute; content:""; top:8px; left:100%; margin-left:-9px;
border:9px solid transparent; border-right-color:#eee; /* 三角マーク色 */
}
.gnav>li:nth-last-child(2) ul li ul:before { /* 右端前リストの三角マーク */
position: absolute; content:""; top: 8px; left:100%;margin-left:-9px;
border: 9px solid transparent; border-right-color: #eee;
}
}
@media screen and (max-width:599px) { /* スマホ用 */
.gnav{ width:33vw; flex-direction:column; margin-top:0; }
.gnav li{ width:98%; margin:0 auto; padding: 0; text-align:center; }
.gnav li ul{ top:1px; left:100%; width:100%;}
.gnav li ul:before{
position:absolute; content: ""; top:7px; left: -11px; width:0; height:0;
border:9px solid transparent; border-left-color: #eee; /* 三角マーク色 */
}
}
</style>
<script>
$(function() {
$('.gnav-btn').on('click', function() {
$(".gnav").slideToggle();
$(this).toggleClass("highlight");
});
});
// 文字コード UTF-8
ina =""; inz ="../../";
ina +=" <ul class='gnav'>";
ina +=" <li><a href='"+inz+"../index.html' title='くらげのトップ'><img src='"+inz+"../img/LOyuki14.gif'></a>";
ina +=" <ul>";
ina+=" <li><a href='"+inz+"../map-w.html'>サイトマップ</a></li>";
ina+=" <li><a href='"+inz+"hp_g.html'>ホームページ作り</a></li>";
ina+=" <li><a href='"+inz+"../w_map/w_map.html'>maps</a></li>";
ina +=" </ul>";
ina +=" </li>";
ina+=" <li><a href='"+inz+"kiso/kiso0.html'>ＨＰ作り基礎編</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"kiso/kiso0.html'>ＨＰのしくみ</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"./kiso/url.html'>URL･IPアドレス</a></li>";
ina+=" </ul>";
ina+=" </li>";
ina+=" <li><a href='"+inz+"kiso/flow.html'>HP作成フロー</a></li>";
ina+=" <li><a href='"+inz+"kiso/kiso1.html'>ＨＰ作りの準備</a></li>";
ina+=" <li><a href='"+inz+"kiso/kiso2.html'>ＨＰを作ってみる</a></li>";
ina+=" <li><a href='"+inz+"kiso/trans.html'>HPを公開する</a></li>";
ina+=" <li><a href='"+inz+"kiso/kiso4.html'>実用サンプル</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"kiso/kiso2.html#jitu'>実用サンプル解説</a></li>";
ina+=" </ul>";
ina+=" </li>";
ina+=" <li><a href='"+inz+"kiso/btag.html'>最少基本タグ</a></li>";
ina+=" <li><a href='"+inz+"html5/html5.html'>html 5</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"html5/respons.html'>レスポンシブ Web</a></li>";
ina+=" <li><a href='"+inz+"html5/flexbox.html'>flex box</a></li>";
ina+=" <li><a href='"+inz+"html5/canvas.html'>グラフを描く</a></li>";
ina+=" </ul>";
ina+=" </li>";
ina+=" <li><a href='"+inz+"kiso/net.html'>internet 回線</a></li>";
ina+=" </ul>";
ina +=" </li>";
ina +=" <li><a href='"+inz+"syoho/syoho1.html'>ＨＰ作りの初歩</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"syoho/syoho3.html'>画像を貼付ける</a></li>";
ina+=" <li><a href='"+inz+"syoho/syoho5.html'>LINKを貼る</a></li>";
ina+=" <li><a href='"+inz+"syoho/syoho4.html'><table>タグを使う</a></li>";
ina+=" <li><a href='"+inz+"kiso/btag.html'>基本的なタグ</a></li>";
ina+=" <li><a href='"+inz+"syoho/page/index.html'>最少タグでHP</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"syoho/kihon1.html'> 解 説 １</a></li>";
ina+=" <li><a href='"+inz+"syoho/kihon2.html'> 解 説 ２</a></li>";
ina+=" <li><a href='"+inz+"syoho/kihon3.html'> 解 説 ３</a></li>";
ina+=" </ul>";
ina+=" </li>";
ina+=" <li><a href='"+inz+"syoho/syoho6.html'>ソースTXTを表示</a></li>";
ina+=" <li><a href='"+inz+"zero/zero01.html'>ゼロから作る</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"zero/zero01.html'>ゼロから作る 1</a></li>";
ina+=" <li><a href='"+inz+"zero/zero02.html'>ゼロから作る 2</a></li>";
ina+=" <li><a href='"+inz+"zero/zero03.html'>ゼロから作る 3</a></li>";
ina+=" <li><a href='"+inz+"zero/zero04.html'>ゼロから作る 4</a></li>";
ina+=" </ul>";
ina+=" </li>";
ina+=" </ul>";
ina +=" </li>";
ina +=" <li><a href='"+inz+"tegaru/us_sft.html'>手軽に作る</a>";
ina +=" <ul>";
ina+=" <li><a href='"+inz+"tegaru/compos.html'>Composerを使う</a></li>";
ina+=" <li><a href='"+inz+"tegaru/us_wd.html'>ワードで作る</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"tegaru/us_wd1.html'>サンプル１</a></li>";
ina+=" <li><a href='"+inz+"tegaru/dotN.html'>フォルダ名対策</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"tegaru/us_xls.html'>エクセルで作る</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"tegaru/abc.htm'>サンプル１</a></li>";
ina+=" <li><a href='"+inz+"tegaru/excel.html'>サンプル２</a></li>";
ina+=" <li><a href='"+inz+"tegaru/us_xls.html#hakkou'>ピボットテーブル</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"tegaru/us_ppt.html'>PowerPointで</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"tegaru/us_ppt.html#hakkou'>アニメも出来る</a></li>";
ina+=" <li><a href='"+inz+"tegaru/ppt01.htm'>サンプル１</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"tegaru/dotN.html'>フォルダ名対策</a></li>";
ina+=" </ul>";
ina +=" </li>";
ina +=" <li><a href='"+inz+"susumu/xml.html'>HTMLを超える</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"style/style1.html'>CSSの基礎</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"style/style2.html'>CSSの記述</a></li>";
ina+=" <li><a href='"+inz+"style/style02.html'>CSS適用例</a>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"susumu/jst.html'>JavaScript</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"jsct/jsct.html'>J.S.を使う</a></li>";
ina+=" <li><a href='"+inz+"jsct/gainen.html'>JavaScriptの概念</a></li>";
ina+=" <li><a href='"+inz+"jsct/jquery.html'>jQueryを使う</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"susumu/xml.html#JavaA'>Java Applet</a></li>";
ina+=" <li><a href='"+inz+"susumu/xml.html#CGI'>CGIを使う</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"susumu/cgiset.html'>CGIを設置する</a></li>";
ina+=" <li><a href='"+inz+"susumu/cgiRun.html'>CGIをテスト</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"jphp/php.html'>PHPを使う</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"wdprs/wdprs.html'>Wordpressを使う</a>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"flash/flash.html'>flashアニメ</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"flash/para/para.html'>パラパラアニメ</a></li>";
ina+=" <li><a href='"+inz+"flash/evnt/evnt.html'>イベントアニメ</a></li>";
ina+=" <li><a href='"+inz+"flash/scrpt/scrpt.html'>スクリプトアニメ</a></li>";
ina+=" <li><a href='"+inz+"flash/X_act/X_act.html'>複合動作アニメ</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"tech/tech.html'>作成テクニック</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"tech/edit.html'>エディタを変更</a></li>";
ina+=" <li><a href='"+inz+"tech/menu-j/menu-j.html'>メニュー作成</a></li>";
ina+=" </ul></li>";
ina+=" </ul>";
ina +=" </li>";
ina +=" <li><a href='"+inz+"etc/HP_lnk.html'>参考サイト他</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"etc/keitai.html'>携帯用HP</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"../w_map/keitai.html'>携帯で地図表示</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"smaph/smUse.html'>格安スマホ</a>";
ina+=" <ul>";
ina+=" <li><a href='"+inz+"smaph/smZenF.html'>ZenFone2-OCN</a></li>";
ina+=" <li><a href='"+inz+"smaph/smPage.html'>スマホ用page</a></li>";
ina+=" <li><a href='"+inz+"smaph/battery.html'>バッテリー</a></li>";
ina+=" <li><a href='"+inz+"smaph/gai-sim.html'>海外で利用</a></li>";
ina+=" <li><a href='"+inz+"smaph/search.html'>端末を探す</a></li>";
ina+=" <li><a href='"+inz+"smaph/smLink.html'>スマホ link</a></li>";
ina+=" </ul></li>";
ina+=" <li><a href='"+inz+"wdprs/wdprs.html'>WordPress</a></li>";
ina+=" </ul>";
ina +=" </li>";
ina +=" </ul>";
// 更新日を表示する ---------------------------------------------------
myMod = document.lastModified;
myD = new Date(myMod);
myYear = myD.getYear(); myYear19 = (myYear < 2000) ? myYear+1900 : myYear;
myMonth = myD.getMonth() + 1; // myDate = myD.getDate();
myModif = myYear19 + "/" + myMonth + "/" + myD.getDate();
myModif = " 更新日: " + myModif.bold();
</script>
</head>
<body>
<header id="head">
<div id="top">
<div id="topL"> </div>
<div id="topC"> header タイトル </div>
<div id="topR"> <script> document.write( myModif ); </script> </div>
</div>
<div class="gnav-btn" id="gnav-btn" title="メニューボタン">☰</div>
<div id="gnav-wrap" >
<script> document.write( ina ); </script>
</div>
</header>
<div style="height:calc(100vh - 104px); background:#ffe; text-align:center;">main</div>
</body>
</html>