ナビゲーションメニュー「そのまま使える」サンプル

Flash

OFF ONLY

/ > > >

第1話ナビゲーションメニュー「そのまま使える」サンプル

記事掲載: 2002/11/03 (更新: 2003/02/27 )

1. ナビゲーションメニュー "そのままつかえる" サンプル

JavaScript そのまま使えるサンプル集、第２段はナビゲーションメニューだよ！みんなも探してたよね？（笑）作ったので使ってやってください。対応ブラウザは InternetExplorer 4, Netscape6, Opera6 以上かな。

まずは JavaScript はよく分からないケド簡単に使いたい人に、そのまま使えるサンプル！まずはページのソースを表示して、HTML の HEAD に次の記述を追加して！

ColorOff / ColorOn はナビゲーションバーの文字色ね。 HTML の色指定をそのまま書込んだら OK だよ（例： color:white, color:#FFFFFF など）。次に今度は HTML の BODY にナビゲーションバーを作るよ。ナビゲーションバーを作りたい部分に次の記述を追加してね。場所がよく分からない時は、最初にナビゲーションバーから作った方がいいかな。※sena777 さんにご指摘いただきました！ Netscape6 ではページ上端のマージンを0ピクセルに設定しないと正常に動作しないようです。 CSSの記述を追加しました。（2003/ 2/27: sena777 さん感謝！）

<TABLE width="100%" border="0" cellspacing="0" cellpadding="2">
<TR><TD bgcolor="BarBGColor"><TABLE border="0" cellspacing="0" cellpadding="1"><TR>

<TD><FONT size="-1"><A href="XXX.html" class="nmenu"><B>MenuName</B></A><IMG src="Spacer.gif" height="8" width="10"></FONT></TD>

</TR></TABLE></TD></TR></TABLE>

BarBGColor はナビゲーションバーの色、真ん中の＜TD＞～＜/TD＞がメニューの項目に対応しているから、必要な個数だけ追加してね。 MenuName が表示したい名称（全角でもOK）、XXX.html がリンク先だよ。 Spacer.gif はレイアウトのサイズ調整に使う透明な画像だよ。GIFファイルを全て透明色にして保存しよう。（※GIF画像が作れない場合は＜IMG～＞全体をスペース（文字）にしよう）

これでデフォルトのナビゲーションバーの完成。マウスカーソルをあわせると表示されるナビゲーションメニューはブラウザによって表示できるか？変わってくるんだけど、今作ったナビゲーションバーは、ナビゲーションメニューを表示できない場合に表示されるナビゲーションバーになるんだね。

この時点でページをブラウザで表示させて、思った通りに出来ているか？確認してみてね。どう？うまくいってる？ＯＫ！じゃぁ、これに機能を追加しようか！

・・・・

ファイル名： basedsystem.js

<SCRIPT language="JavaScript" src="basedsystem.js"></SCRIPT>

ファイル名： navigationsystem.js

/*
	Navigation Menu System for IE4up, Netscape6up, and Opera6up
	copyright(C)2002 SHIN-ICHI ( http://www.h2.dion.ne.jp/~survive/ )

required boolean : IE4, NN6 and OP6
*/

var objOpenedNaviMenu = null;

var strNaviBarID;    	// NavigationBar DIV ID

var strNaviMenuID;   	// + n	MenuItemTitle TD ID
var strNaviMenuClass;	//    	MenuItemTitle TD and A Class
var strNaviLinkID;  	// + n	MenuItemTitle A ID

var strMenuBlockID; 	// + n 	MenuItemFloating DIV ID
                     	//    	MenuItemFolating DIV Class --> Don't use this script, but css for desgin
var strMenuItemClass; 	//    	SubItemTitle DIV and A Class

// Navigation System Start Method
function startNaviMenu(NaviBarID, NaviMenuID, NaviMenuClass, NaviLinkID, MenuBlockID, MenuItemClass){

// init properties
    strNaviBarID	 = NaviBarID;
    strNaviMenuID	 = NaviMenuID;
    strNaviMenuClass = NaviMenuClass;
    strNaviLinkID	 = NaviLinkID;
    strMenuBlockID	 = MenuBlockID;
    strMenuItemClass = MenuItemClass;

// event handling
    if(IE4 || OP6){ 
        document.onmouseover = viewNaviMenuIEandOpera; 
	
    }else if(NN6){
        window.addEventListener("mouseover", viewNaviMenuN6, true);
    }
}

// Common Get Object from ID Name
function getObjectFromID(strIDName){
    if( IE4 ){
        return document.all[strIDName];
    }else{
        return document.getElementById(strIDName);
    }
}

// Common Open Menu
function viewNaviMenuCommon(objEvent){

objPosition = getObjectFromID(strNaviBarID);
    if( objEvent.className == strNaviMenuClass ){

closeNaviMenu();
        var strThisID = objEvent.id;
        if( strThisID.indexOf(strNaviLinkID) >= 0 ){ 
            strThisID = strThisID.replace(strNaviLinkID, strNaviMenuID)
        }

objItem = getObjectFromID( strThisID );
        objOpenedNaviMenu = getObjectFromID( strThisID.replace(strNaviMenuID, strMenuBlockID) );

objOpenedNaviMenu.style.top  = objItem.offsetTop  + objPosition.offsetTop + objPosition.offsetHeight + "px";
        objOpenedNaviMenu.style.left = objItem.offsetLeft + objPosition.offsetLeft + "px";
        objOpenedNaviMenu.style.visibility = "visible";
	
    }else if( objOpenedNaviMenu != null ){

if( NN6 ){
            if( objEvent.id.indexOf( strMenuBlockID ) >= 0 ){ return; }
            if( objEvent.className == strMenuItemClass ){ return; }

}else{
            if( objOpenedNaviMenu.contains(objEvent) == true
                || objPosition.contains(objEvent) == true){ return; }
        } 
    	closeNaviMenu();
    }

}

// Internet Explorer 4,5,6 and Opera 6,7 Event Handler
function viewNaviMenuIEandOpera(){
    viewNaviMenuCommon( window.event.srcElement );
}

// Netscape 6,7 Event Handler
function viewNaviMenuN6(eventMouseOver){
    viewNaviMenuCommon( eventMouseOver.target );
}

// Common Close Menu
function closeNaviMenu(){
    if(objOpenedNaviMenu != null){
        objOpenedNaviMenu.style.visibility = "hidden";
    }
    objOpenedNaviMenu = null
}

ファイル名： navigation.css

<LINK REL=STYLESHEET TYPE="TEXT/CSS" HREF="navigation.css">

それぞれテキストファイルにファイル名をつけて、ページと同じフォルダに保存。上のテキストエリアを右クリック、[ 全てを選択 ] してコピー＆メモ帳に張り付け、右端で折り返さないで保存するといいよ。それから <SCRIPT～</SCRIPT>の記述を HTML の HEAD に追加するのもイメージボタンと同じ。順番は変えないでね。 basedsystem.js が先だよ。最初に追加した STYLE の記述とは、どっちが先でもいいよ。あ、スタイルシートの方は色を変更してね。 #2a4076 がバーの色、white が文字の色 off, #ff8000 が文字の色 on に対応。

さて次は、自分で js ファイルを作らないといけないよ！でも簡単、サンプル通りにすれば良いので、そのまま書いてね。同じようにメモ帳か何かでテキストファイルを新規作成して・・・

ファイル名： navigationwrite.js

if( IE4 || NN6 || OP6 ){

    writeNaviBarStart();
    writeNaviMenu(0, "MenuName0", "XXX0.html");
    writeNaviBarEnd();

    writeMenuBlockStart(0);
    writeMenuItem("SubMenuName0", "XXX0.html" );
    writeMenuBlockEnd();

    document.close();
    startNaviMenu( "NaviBar", "NaviMenuTD", "NaviMenu",
         "NaviMenuLink", "MenuBlockDIV", "MenuItem");
}else{
    document.write( "<TABLE width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">\r\n" +
        " <TR>\r\n" +
        " <TD bgcolor=\"#2a4076\">\r\n" +
        " <TABLE border=\"0\" cellspacing=\"0\" cellpadding=\"1\">\r\n" +
        " <TR>\r\n" +
         " <TD><FONT size=\"-1\"><A href=\"XXX0.html\" class=\"nmenu\"><B>MenuName0</B></A><IMG src=\"Spacer.gif\" height=\"8\" width=\"10\"></FONT></TD>\r\n" +
        " </TABLE>\r\n" +
        "</TD></TR>\r\n" +
        "</TABLE>" );
        document.close();
}

まずはこのまま書いてね。テキストエリアの記述はそのまま右クリック[全てを選択] コピー＆張り付けでOKだよ。それから writeNaviMenu の行はナビゲーションバーを作った時につけた、メニュー項目の名称とリンクをそれぞれ、 0 から順番に番号をつけて書いてね。

＜例＞
    writeNaviBarStart();
    writeNaviMenu(0, "ソフトの紹介", "softs.html");
    writeNaviMenu(1, "ダウンロード", "softs_download.html");
    writeNaviMenu(2, "サポート・免責", "softs_support.html");
    writeNaviMenu(3, "ライセンス登録", "softs_license.html");
    writeNaviBarEnd();

次の writeMenuBlockStart の記述だけど、これは表示されるフローティングメニューについての記述だよ。さっき書いたメニュー項目の数だけ writeMenuBlockStart( 番号 ) を書いてね。 writeMenuItem はフローティングメニューの項目一覧を、今度は番号をつけなくて良いから、同じように書いてね。

＜例＞
    writeMenuBlockStart(0);
    writeMenuItem("概要一覧（一般向けソフト）", "softs.html" );
    writeMenuItem("・パソコンで携帯電話メール", "softs_list_phonemail.html" );
        ：
    writeMenuItem("概要一覧（開発者向けソフト）", "softs_developer.html" );
    writeMenuBlockEnd();

    writeMenuBlockStart(1);
    writeMenuItem("パッケージの種類", "softs_download.html");
    writeMenuItem("一般向けソフトDownload一覧", "softs_download_list.html");
    writeMenuItem("開発者向けソフトDownload一覧", "softs_download_listDeveloper.html");
    writeMenuBlockEnd();

        ：

最後の else{ document.write( ・・・の中の記述は、実は最初に作ったデフォルトのナビゲーションバーの HTML ソースそのままだよ。ただ、半角のダブルコーテーション(”)の前に半角の￥マークをつけるのは JavaScript の記述のルールね。まぁ、あんまり考えなくて OK なので、メニュー項目に対応した行を、必要な情報（リンクと名称）を変更して追加してやってね。

・・・・

ＯＫ！それじゃぁ、最後、これで完成だよ。最初に作ったデフォルトのナビゲーションバーの前後に次の記述を追加して、この機能が使えるブラウザの場合は、ナビゲーションメニューが表示されるように！という機能追加をしよう。

：

</TR></TABLE></TD></TR></TABLE>
</NOSCRIPT>

これで君の作った js ファイルが呼び出されて JavaScript が実行されるよ。対応ブラウザの時はナビゲーションメニューの作成と動作スタート、非対応ブラウザの場合やJavaScriptの動作が切ってある時は、デフォルトのナビゲーションバーが表示されるっていうわけ。

長かったねぇ、難しかった？よく頑張ったね。お疲れさま～。じゃぁ、上級者向け解説、行きますか！

このドキュメントの内容は、あくまで筆者の個人的な意見です。複製・転載は出来ません。

1.ナビゲーションメニュー「そのまま使える」サンプル

2.フローティングの仕組み

とほほのJavaScriptリファレンス