人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascripでの特殊なドロップダウンメニューの作成について質問させてください。

現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。

↓参考サイトです
?http://flatone.s206.xrea.com/index.html?

こういったドロップダウンメニューなのですが、例えばこのメニューのページ1というボタンをクリックするとhttp://flatone.s206.xrea.com/page1/index.htmlというURLに飛びますが、このURLの/page1ディレクトリ以下を閲覧中の時にはページ1ボタンのドロップダウンメニューを"出さない"ということがやりたいのです。

ちなみにメニュー下に表示しているスクリプトはここに読み込んでいるmenu.jsの内容です。
自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。

どなたか解決法をご教授いただければ幸いです。
よろしくお願いします。

●質問者: yurina1023
●カテゴリ:ウェブ制作
✍キーワード:JavaScript js URL クリック グローバル
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Reiaru
●0ポイント

現在のページを取得する方法が非常にやっつけなのですが、

概念としては各 index.html 内 (page1 ? page5) に以下の様な記述が必要なのではないかと思います。


それぞれにある既存の <li> をコメントアウトし、

そこに <Script Language="JavaScript"> ? </script> までをコピーすれば動作するにはする筈です。

(本来は、追加する JavaScript 部分を menu.js に定義してそれを呼び出す形にすべきなのですが)


<!--//メニュー5-->

<!--
 <ul>
<li><a href="index.html" onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show')"><img src="../images/gnavi01.gif" class="btn" /></a></li>
<li><a href="../page2/index.html" onmouseout="MM_showHideLayers('Layer2','','hide')" onmouseover="MM_showHideLayers('Layer2','','show')"><img src="../images/gnavi02.gif" class="btn" /></a></li>
<li><a href="../page3/index.html" onmouseout="MM_showHideLayers('Layer3','','hide')" onmouseover="MM_showHideLayers('Layer3','','show')"><img src="../images/gnavi03.gif" class="btn" /></a></li>
<li><a href="../page4/index.html" onmouseout="MM_showHideLayers('Layer4','','hide')" onmouseover="MM_showHideLayers('Layer4','','show')"><img src="../images/gnavi04.gif" class="btn" /></a></li>
<li><a href="../page5/index.html" onmouseout="MM_showHideLayers('Layer5','','hide')" onmouseover="MM_showHideLayers('Layer5','','show')"><img src="../images/gnavi05.gif" class="btn" /></a></li>
</ul>
-->

<!-- 追加部分 -->
<Script Language="JavaScript">
<!--
var str;
str=escape(location.href);
var n = str.indexOf("page");
n = str.substr(n + 4, 1);

document.open();
document.write("<ul>");
if (n != '1') {document.write("<li><a href='index.html' onmouseout='MM_showHideLayers('Layer1','','hide')' onmouseover='MM_showHideLayers('Layer1','','show')'><img src='../images/gnavi01.gif' class='btn' /></a></li>");};
if (n != 2) {document.write("<li><a href='../page2/index.html' onmouseout='MM_showHideLayers('Layer2','','hide')' onmouseover='MM_showHideLayers('Layer1','','show')'><img src='../images/gnavi02.gif' class='btn' /></a></li>");};
if (n != 3) {document.write("<li><a href='../page3/index.html' onmouseout='MM_showHideLayers('Layer3','','hide')' onmouseover='MM_showHideLayers('Layer1','','show')'><img src='../images/gnavi03.gif' class='btn' /></a></li>");};
if (n != 4) {document.write("<li><a href='../page4/index.html' onmouseout='MM_showHideLayers('Layer4','','hide')' onmouseover='MM_showHideLayers('Layer1','','show')'><img src='../images/gnavi04.gif' class='btn' /></a></li>");};
if (n != 5) {document.write("<li><a href='../page5/index.html' onmouseout='MM_showHideLayers('Layer5','','hide')' onmouseover='MM_showHideLayers('Layer1','','show')'><img src='../images/gnavi05.gif' class='btn' /></a></li>");};
document.write("</ul>");
document.close();
// -->
</Script>
<!-- 追加部分ここまで -->

 <p> </p>
◎質問者からの返答

ご回答ありがとうございます。

ご回答いただいた方法を試してみたのですが、page1ボタン自体が消えてしまいました。

説明が不十分で申し訳ないのですが、ドロップダウンメニューだけが出力されないようにしたいです。

あと、便宜上今はディレクトリ名をpage1,page2などとしていますが、実際にはそれぞれのディレクトリ名はgaiyouやinformationといった感じになります。

このナビゲーションを含めたヘッダー部は後にphpでインクルードしてどのページでも同じようにして使えるようにしたいと思っています。

説明が不十分で大変申し訳ありませんでした。

よろしくお願いします。


2 ● Reiaru
●50ポイント

申し訳ありません、完全に仕様を誤解しておりました。

これも効率的とは言えないかもしれませんが、取りあえず動くものを提示致します。


menu.js (場所はどこでも良いです。AAA.html などは適宜ファイル名を変更して下さい)

function setPageNo() {
 var str; var n;
 str = escape(location.href);
 str = str.split(/[\\\/]/).pop();
 switch (str) {
 case 'index.html':
 n = 1; break;
 case 'AAA.html':
 n = 2; break;
 case 'BBB.html':
 n = 3; break;
 case 'CCC.html':
 n = 4; break;
 case 'DDD.html':
 n = 5; break;
 }
 return n;
}

各 *.html

<body onload="initRollovers();"><div align="center">

<!-- 追加部分 -->
<Script Language="JavaScript">
<!--
n = setPageNo();
// -->
</Script>
<!-- 追加部分ここまで -->

<h1>ページ1</h1>

各 *.html (以下は1のみですが、実際にはそれぞれのメニューの改変が必要です。" が ' になっていたりするので気をつけて下さい)

<!--メニュー1-->
<div style="position:relative; z-index:2;">
<div id="Layer1">
<table cellspacing="0" width="168">
<tr>

<!-- コメントアウト -->
<!--
<td onMouseOut="MM_swapImgRestore();MM_showHideLayers('Layer1','','hide'); hideMenu('Layer1')" onMouseOver="MM_showHideLayers('Layer1','','show'); showMenu('Layer1')">
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
<a href="#" class="puldown"> sample</a>
//-->
<!-- コメントアウトここまで -->

<!-- 追加部分 -->
<Script Language="JavaScript">
<!--
document.open();
if (n != 1) {document.write(
"<td onMouseOut='MM_swapImgRestore();MM_showHideLayers('Layer1','','hide'); hideMenu('Layer1')' onMouseOver='MM_showHideLayers('Layer1','','show'); showMenu('Layer1')'>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>" +
"<a href='#' class='puldown'> sample</a>"
)};
document.close();
// -->
</Script>
<!-- 追加部分ここまで -->

</td></tr></table>
</div>
</div>
<!--//メニュー1-->

関係ありませんが、プログラム関係の質問をされるときはコメント欄を空けておいて頂けると助かります。

不明な点があったり、後から間違いに気が付いたりする事もありますので…。

◎質問者からの返答

ご回答ありがとうございます。

この方法でできました。

ただ、本サイトに入れる時にどの部分をディレクトリ名(/gaiyou/や/information/みたいな)に変更したら良いのかがわからなかったのです。

case 'index.html':

↑menu.jsのこの部分でしょうか?ここはファイル名を入れるということで、ディレクトリ名ではないということでしょうか?

申し訳ありませんが、この点だけ今一度ご回答いただけると嬉しいです。


3 ● Cherenkov
●50ポイント ベストアンサー

こういう質問はコメント欄を有効にしましょう。

一番簡単なのは、http://flatone.s206.xrea.com/page1/index.htmlのhtmlの

表示したくないプルダウンメニューのMM_showHideLayers('Layer1','','show')を

MM_showHideLayers('Layer1','','hide')に書き換えるのが早いけど、

動的に変えるならこうですかね。

(ちゃんと関数つくってあったんですね。引数の扱いが読み辛いので分かってきたら直したほうがいいかと思います。)

以下のコードをmenu.jsに追加するか、scriptタグで囲んでpage1/index.htmlに貼るか。

if(/\/page1\//.test(location.href)) {
 var a = document.getElementsByTagName('a');
 for(var i=0; i<a.length; i++) {
 if(/Layer1/.test(a[i].onmouseover)){
 a[i].onmouseover = "MM_showHideLayers('Layer1','','hide')";
 }
 }
}

説明

正規表現のtestメソッドでアドレスに/page1/が含まれるか判定。

表示したくないプルダウンを指定するためにdocument.getElementsByTagNameを使ってすべてのaタグを抽出。

すべてのaタグのなかから再びtestメソッドを使ってLayer1を含むものを洗い出す。

マッチしたらonmouseoverを上書き。



プルダウンメニューにid属性(Layer1)を付けてやれば効率があがります。

if(/\/page1\//.test(location.href)) {
 var hide = document.getElementById('Layer1');
 hide.onmouseover = "MM_showHideLayers('Layer1','','hide')";
}

とか。

◎質問者からの返答

ご回答ありがとうございます。

この方法は簡単に実現できて大変良かったのですが、なぜかいつもページを開いて1回目にメニューボタンにマウスオーバーした時はドロップダウンメニューが表示されてしまいます。

2回目以降のマウスオーバー時には表示されないのですが。

この問題の解決法を今一度ご教授願えればと思います。

よろしくお願いします。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ