記事内容

ワコさんの0407がエラー出てるのでとりあえず

条件

• 必ず代替案を用意しておく

実践

補足

class="menu-on"は使えません。その記述は削除してください。

1. メニュー箇所を、テキストエディタに貼り付ける。 　　　

   document.open();
   document.write('<li id="MENU01"><a href="index.html">index</a></li>');
   document.write('<li id="MENU02"><a href="sample1.html">sample1</a></li>');
   document.write('<li id="MENU03"><a href="sample2.html">sample2</a></li>');
   document.write('<li id="MENU04"><a href="sample3.html">sample3</a></li>');
   document.close();
   

   わかる方はJavaScriptでヒアドキュメントを使うライブラリ探して使うと楽かも。
2. メニュー内容を記述したファイルをmenu.jsという名前で保存（便宜上menuという名前で統一してるだけなのでどんな名前でもいい）
3. メニューのないhtmlファイルを編集。メニューがあった位置に次の文を挿入。（例はmenu.jsとHTMLファイルが同階層にあった場合。別ディレクトリの場合は適宜パス変える）

   <script type="text/javascript" src="menu.js"></script>

   こんなふう

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <script type="text/javascript" src="menu.js"></script>
    </ul>
   </div>
   <hr>

   JavaScript有効時環境での解釈

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <li id="MENU01"><a href="index.html">index</a></li>
   <li id="MENU02"><a href="sample.html">sample</a></li>
   <li id="MENU03"><a href="sample2.html">sample2</a></li>
   <li id="MENU04"><a href="sample3.html">sample3</a></li>
    </ul>
   </div>
   <hr>

これで終わりじゃ駄目

JavaScript無効環境では、JavaScriptは無視される。つまり以下の様になる。

<div id="MENU">
<h2>menu</h2>
 <ul>
 </ul>
</div>
<hr>

JavaScript無効環境の人はとても困る。代替案を用意しましょう。各々適切なナビゲーションの提供をよろしく。

案1

1. 別途サイトマップを作ってそこにリンクしてみる。
2. sitemap.html（便宜上（略））を作る
3. <noscript>で提供

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <script type="text/javascript" src="menu.js"></script>
   <noscript><li><a href="sitemap.html">Sitemap</a></li></noscript> 
   </ul>
   </div>
   <hr>

   JavaScript無効環境での解釈

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <li id="MENU01"><a href="sitemap.html">sitemap</a></li>
    </ul>
   </div>
   <hr>

案2

1. index.htmlのリンクだけはJavaScriptで出力しないことにして、そこにリンクしてみる。
2. <noscript>で提供

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <script type="text/javascript" src="menu.js"></script>
   <noscript><li><a href="index.html#MENU">サイトメニュー</a></li></noscript> 
   </ul>
   </div>
   <hr>

   JavaScript無効環境での解釈

   <div id="MENU">
   <h2>menu</h2>
    <ul>
   <li id="MENU01"><a href="index.html#MENU">サイトメニュー</a></li>
    </ul>
   </div>
   <hr>

これでおわり

menu内容の書かれたJavaScriptファイルと書き替えたhtmlファイルとファイルをアップロードしておわりです。