本日  昨日
 
12/03(Sat) 18:35

o ツリー式メニューバーの作り方
【お知らせ】muginaviがver3.10へバージョンアップ(2002.9.17)にしました。これに対応して設置方法を改訂しました(2002.9.22)
[旧バージョンから移行する方は] 追加機能やスタイル指定の仕様などいろいろ変わっています。項目設定以外をすべて消して設置し直してください。


このメニューバーは基本機能に必要な追加機能を追加して自分の好みにあうようにカスタマイズします。「菊池さんの工作室」トップページのメニューバー(縦型)では以下のスクリプトを使ってます。ここではトップページのメニューバー(縦型)を例に作り方を説明します。
    <基本機能>
  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
スクリプトのダウンロード
  • 作者のメニューバー スクリプトページに詳細な説明とサンプルがあります。ダウンロードの前にその説明をよく読んで、自分がどんなメニューバーを作りたいのかを考えて追加機能やパラメータの意味をチェックし設置するようにしてください。
  • 追加機能は自分の作るメニューに応じて必要なものだけを選びます。意味もわからないまま組み込んだりしないようにしましょう。
  • 全jsファイルがアップロードされているのを見かけます。しかも無関係のサンプルファイルまで。サーバースペースの無駄です。
  1. まず初めに下の「作者Mugi's Homepageさん」のページから muginavi の最新版をダウンロードします。(2003.04.01時点の最新バージョンは Ver 3.25です)
    ・メニュースクリプト「muginavi」ページ  http://mugi.cc/muginavi/

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

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

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

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

  1. 作成、編集するのは、menu.jsとmnstyle.cssおよびメニュー表示するindex.htmの3つです
  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を必ず指定してください。
■ add() の書式
  1. muginavi.add("ID","文字列","リンク先","target[省略可]") ----通常の書式
  2. muginavi.add("ID","-") ----区切り線
  3. muginavi.add("ID","文字列") ----リンク動作なし。サブメニューを持つ項目などに使う
  4. muginavi.add("ID","文字列","-") ----文字列表示。コメント表示や余白調整などに使う
■ メニューのID構成(下のmenu.jsの構成)
  1. IDは最初が英字、あとは英数字かアンダーバー(_)、ハイフン(-)で指定してください
  2. ID指定は「home」「dialy」「bbs」などリンク先に合う英単語を付けるようにするといいです。
    あとから追加/削除するときにわかりやすい名前を付けましょう。
  3. 「表示設定」では、不要な設定は記述しないでください。誤動作の原因になりやすいし無駄にサイズが増えることになります。
  初期表示項目  1階層目サブメニュー項目  2階層目サブメニュー項目      banner      dhtml -------------nyumon -----------------cbrowser | |---------stylesheet |-------benri-------------------help1 |---------help2 |---------gazou      jscript -----------cookie -----------------intro | |---------houmon | |---------aisatu1 | |---------aisatu2 |-------sound-------------------bgm1 |---------bgm2 |---------image ■ menu.jsの内容

/* 表示設定 */ 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
/* muginavi スタイル設定 */ /* メニュー全体のスタイル */ .muginavi,.muginavi-nn{ color:#003366; /* リンクでない文字の色 */ font-size:10pt; font-family:Arial,sans-serif; layer-background-color:#aeae55; } /* 背景色はNN4と他で2回記述 これには背景色以外の指定はしないこと */ #muginaviroot,.muginavisub .muginavi{ background-color:#aeae55; } /* リンク項目のスタイル */ .muginavi a{ color:#003366; text-decoration:none; }

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

  1. リンク項目の文字色の変更と下線非表示の追加
  2. 画像セルの背景を黒色にするために、項目個別のスタイル指定の追加
/* リンク項目の文字色の変更と下線非表示 */ .muginavi a:hover { color:#003366; text-decoration:none; } .muginavi a:visited { color:#003366; } .muginavi a:visited:hover { color:#003366; } /* [項目個別にスタイルを指定する例] セレクタ名はadd()のIDに対応 color指定は「#ID a{}」に、他のプロパティは「#ID」に指定。 背景色を指定した場合NN4ではカーソルを乗せてもその色のままになります。 */ #banner{ //画像項目の背景を黒色にする layer-background-color:black; background-color:black; }

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

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

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

<head>部に記述
  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行目)
<body>部に記述
  1. <body>の次行にmnload("menu.js");を記述する(16〜20行目)
  2. <div class="muginavioff">と</div>の間に、muginavi非対応ブラウザや、JavaScriptをオフにしているユーザーなどメニューが表示されない環境の人にも、あなたのサイトのコンテンツを見れるように代替表示リンクを記述します(21〜29行目)
  3. スクロールを確認するためにテスト用にダミーの改行を入れています。(実際のhtml文には入れる必要はありません)(30〜32行目)
■ index.htmの実際の記述内容
<html><head> <title>動作確認用HTML</title> <link rel="stylesheet" type="text/css" href="mnstyle.css"> <script language="javascript" src="mninit.js"></script> <script language="javascript1.2"> <!-- // 追加機能を使う場合は mnload() を使う。 mnload("mnautocl.js") mnload("mnscroll.js"); mnload("mndrag.js"); mnload("mnshadow.js"); //--> </script> </head> <body> <script language="javascript1.2"> <!-- mnload("menu.js"); //--> </script> <div class="muginavioff"> <a href="dhtml/dhtml00.html">Cross-Browser</a><br> <a href="dhtml/dhtml07.html">スタイルシート</a><br> <a href="dhtml/dhtml03.html">ヘルプ表示(1)</a><br>   ・<br>   ・(略)<br>   ・<br> <a href="java/java16.html">イメージオブジェクト</a><br> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

動作確認

  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そのままコピー&貼り付けで作成して確認するのもいいかも知れません。

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

小ウィンドウをオープンするには、add("ID","文字列","リンク先","target")のリンク先欄に以下の記述をします。
muginavi.add('ID','小ウィンドウ',"javascript:;##onclick=window.open('xxx.html','','width=200,height=150')");
 
 
©1997- Kikuchisan's workshop All rights reserved //