＜基本機能＞

1. muginavi.js --- muginavi本体
2. mninit.js --- ブラウザ判別
3. mnstyle.css --- 基本スタイルシート

   ＜追加機能＞
   

4. mnautocl.js --- サブメニューからカーソルが離れたら自動的にメニューを閉じます
5. mnscroll.js --- ページをスクロールしたときにメニューバーもスクロールし、常に表示されるようにします
6. mndrag.js --- メニューバーをドラッグ＆ドロップで移動できるようにします
7. mnshadow.js --- サブメニューに影を付けます

   ＜ユーザ作成＞
   

8. menu.js --- メニュー定義（jsファイル名は任意ですが、名前を変更するときはすべてのmenu.jsを変更してください）
9. メニュー表示するindex.htm

1. まず初めに下の「作者Mugi's Homepageさん」のページから muginavi の最新版をダウンロードします。(2003.04.01時点の最新バージョンは Ver 3.25です)
   
   ・メニュースクリプト「muginavi」ページ　　http://mugi.cc/muginavi/

   基本機能は必須です。追加機能は自分の必要なものだけを選びましょう

   （注）特に mndrag.js は必要ないのにそのまま組み込んでる方をよく見かけます。
   縦型メニューの場合に推奨。（使用する場合は、メニューバーをつかめるようにルートメニューに非リンク項目を1つは入れておくのを忘れないでください--当ページでは最上段のtitle.gifのセルをこれに当ててます）

   mnstyle.cssは、作者ページのメニュー「設置方法」→「設定」→「スタイル設定」から[基本スタイル設定ファイル](右クリックメニューから保存) でダウンロードするか、当ページの「mnstyle.cssの基本シート（必須）」をコピー＆貼付けして作成します。

■ menu.jsの作成とmnstyle.cssおよびメニュー表示するindex.htmの編集

1. 作成、編集するのは、menu.jsとmnstyle.cssおよびメニュー表示するindex.htmの３つです
2. muginavi.js、mninit.js、mnautocl.js、mnscroll.js、mndrag.js、mnshadow.jsなどの他のファイルは変更せずそのまま使用します。

■ menu.jsの作成

1. パラメータの設定は「表示設定」で行います。また、メニュー項目は「項目設定」に作成します。
2. 「項目設定」のメニューリンク設定は相対アドレス指定ですが、絶対アドレス指定、URL指定が可能です。
3. 左の例のように、文字列の前に画像を付けたいときは
   <img src="gif/arrowp.gif" border=0 align=top width=5 height=9>DHTML
   のように<img>タグを文字列の前に追加します。border=0 align=top width=xx height=xxを必ず指定してください。

1. muginavi.add("ID","文字列","リンク先","target[省略可]") ----通常の書式
2. muginavi.add("ID","-") ----区切り線
3. muginavi.add("ID","文字列") ----リンク動作なし。サブメニューを持つ項目などに使う
4. muginavi.add("ID","文字列","-") ----文字列表示。コメント表示や余白調整などに使う

/* 表示設定 */ muginavi.hilight="#000000"; //ハイライト時の背景色。省略時は色変更実行せず muginavi.txthilight="#ffcc00"; //ハイライト時の文字色。省略時は色変更実行せず muginavi.offset=-13; //サブメニューと親メニューの間隔を指定。省略時は0 muginavi.delay=200; //カーソルが離れてから非表示になるまでの時間(単位:ミリ秒) //mnautocl.js組込要 muginavi.vertical=true; //縦並びメニューにする場合に指定 muginavi.pos="0,150"; //絶対位置指定のときだけ記述。座標をpx値で指定 //mnscroll.js、mndrag.js使用時は必ず指定する muginavi.smoothscroll=true; //スムーズスクロールにする場合に指定 muginavi.root_noborder=true; //ルートメニューに枠を付けない場合にtrueを指定 muginavi.arrowColor="#003366"; //サブメニュー記号の色。省略時は黒 /* 項目設定 */ muginavi.rootitems() //初期表示項目定義の始め muginavi.add('banner','<img src="gif/title.gif" border=0 align=top width=81 height=28>','-'); muginavi.add('dhtml','DHTML'); muginavi.add('jscript','JavaScript'); muginavi.rootend() //初期表示項目定義の終わり muginavi.makesubmenu('dhtml') //サブメニュー項目定義の始め muginavi.add('nyumon','入門・表示'); muginavi.add('benri','便利シリーズ'); muginavi.submenuend() //サブメニュー項目定義の終わり muginavi.makesubmenu('nyumon') //サブメニュー項目定義の始め muginavi.add('cbrowser','Cross-Browser','dhtml/dhtml00.html'); muginavi.add('stylesheet','スタイルシート','dhtml/dhtml07.html'); muginavi.submenuend() //サブメニュー項目定義の終わり muginavi.makesubmenu('benri') //サブメニュー項目定義の始め muginavi.add('help1','ヘルプ表示(1)','dhtml/dhtml03.html'); muginavi.add('help2','ヘルプ表示(2)','dhtml/dhtml04.html'); muginavi.add('gazou','画像反転(2)+ヘルプ表示(2)','dhtml/dhtml12.html'); muginavi.submenuend() //サブメニュー項目定義の終わり muginavi.makesubmenu('jscript') //サブメニュー項目定義の始め muginavi.add('cookie','クッキー'); muginavi.add('sound','画像・サウンド'); muginavi.submenuend() //サブメニュー項目定義の終わり muginavi.makesubmenu('cookie') //サブメニュー項目定義の始め muginavi.add('intro','クッキー入門','java/java34.html'); muginavi.add('houmon','回数/初・前回訪問','java/java44.html'); muginavi.add('aisatu1','訪問回数毎の挨拶','java/java46.html'); muginavi.add('aisatu2','訪問間隔毎の挨拶','java/java47.html'); muginavi.submenuend() //サブメニュー項目定義の終わり muginavi.makesubmenu('sound') //サブメニュー項目定義の始め muginavi.add('bgm1','BGM/音声の挨拶(1)','java/java05.html'); muginavi.add('bgm2','BGM/音声の挨拶(2)','java/java51.html'); muginavi.add('image','イメージオブジェクト','java/java16.html'); muginavi.submenuend() //サブメニュー項目定義の終わり /* メニューバー表示 */ muginavi.showhere();

■ mnstyle.cssの編集

■ mnstyle.cssの基本シート（必須）
オリジナル記述を変更した箇所は以下の部分です。あなたの希望する内容に変更して下さい。オリジナルのままでもかまいません。

1. リンクでない文字色---black → #003366
2. フォントサイズ---16px → 10pt
3. フォント指定---Arial,sans-serif追加
4. 背景色---lightcyan → #aeae55（2ヶ所）
5. リンク項目の文字色---navy → #003366

■ 当ページ固有に追加した内容（参考）

1. リンク項目の文字色の変更と下線非表示の追加
2. 画像セルの背景を黒色にするために、項目個別のスタイル指定の追加

■ メニュー表示するindex.htmの編集

• ホームページビルダーなどのワープロ系ソフトを使っている方はDOCTYPE指定が勝手に挿入されていることがあります。メモ帳などを使って、URIなしのTransitionalに書き換える（下記参照）かDOCTYPE指定を削除してください。
  　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

• 当ページの「説明文テロップ」と「メニューバー」を併用する時は、説明文テロップの変数「nn」とメニューバーの変数「nn」とが競合して、メニューバー側でブラウザ判別ができなくなり「Eventは宣言されてません」のエラーメッセージがでることがあります。この場合は説明文テロップの変数名（3ヶ所）を「bnum」に変えてください。

1. <link rel="stylesheet" type="text/css" href="mnstyle.css">を記述する（3行目）
2. この次行に、<script language="javascript" src="mninit.js"></script>を記述する（4行目）
3. 追加機能を使う場合はこの次行に、mnload(xxxx.js)を記述する。xxxx.jsは利用するjsファイル名です。使わないものは削除してください（5〜13行目）

1. <body>の次行にmnload("menu.js");を記述する（16〜20行目）
2. <div class="muginavioff">と</div>の間に、muginavi非対応ブラウザや、JavaScriptをオフにしているユーザーなどメニューが表示されない環境の人にも、あなたのサイトのコンテンツを見れるように代替表示リンクを記述します（21〜29行目）
3. スクロールを確認するためにテスト用にダミーの改行を入れています。(実際のhtml文には入れる必要はありません)（30〜32行目）

■ 動作確認

1. 上のindex.htmをメモ帳などでコピー＆貼り付けでindex.htmファイルを作成します。
2. 作成・編集が正常に行われてるかを確認するため、上で作成・編集したindex.htm、menu.js、mnstyle.cssおよびダウンロードしたmuginavi.js、mninit.js（必須）、mnautocl.js、mnscroll.js、mndrag.js、mnshadow.js（使いたいものだけ）のファイルを同一場所に置きます
3. index.htmファイルを表示してmenu.jsとmnstyle.cssで設定した内容が、希望のものかパソコン上で確認します。
4. うまく動かないときは、スペルミスや「'」「,」など矛盾がないかチェックしてください。動作確認用に、まず上のmenu.jsとmnstyle.cssそのままコピー＆貼り付けで作成して確認するのもいいかも知れません。

■ ノウハウ集
■ 小ウィンドウをオープンする方法

muginavi.add('ID','小ウィンドウ',"javascript:;##onclick=window.open('xxx.html','','width=200,height=150')");

---