<!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'>HP作り基礎編</a>"; ina+=" <ul>"; ina+=" <li><a href='"+inz+"kiso/kiso0.html'>HPのしくみ</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'>HP作りの準備</a></li>"; ina+=" <li><a href='"+inz+"kiso/kiso2.html'>HPを作ってみる</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'>HP作りの初歩</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'> 解 説 1</a></li>"; ina+=" <li><a href='"+inz+"syoho/kihon2.html'> 解 説 2</a></li>"; ina+=" <li><a href='"+inz+"syoho/kihon3.html'> 解 説 3</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'>サンプル1</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'>サンプル1</a></li>"; ina+=" <li><a href='"+inz+"tegaru/excel.html'>サンプル2</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'>サンプル1</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>