アメリカ版ヤフーの個人ツールの部分ですが、JavaScriptでHTMLがびよーんと変化し各ツールが出て来るのですが、どのように制御しているのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/09/29 17:50:58
  • 終了:2006/10/06 17:55:04

回答(4件)

id:dreamworks No.1

dreamworks回答回数249ベストアンサー獲得回数62006/09/29 20:31:10

ポイント23pt

http://www.geocities.co.jp/Milkyway-Vega/9133/menyu1.html

こんなのでしょうか。

Menu1 Menu2 Menu3の所をクリックしてみてください。

メニューが出てきます。

id:akide

回答ありがとう御座います。

欲を言えば、びろーんと出てくれば尚ありがたいです。

2006/09/29 20:59:06
id:theninja007 No.2

theninja007回答回数60ベストアンサー獲得回数42006/10/02 18:55:34

ポイント23pt

Ajax(エイジャックス)という技術です。

AjaxとはAsynchronous Javascript and XMLの略です。

IT用語辞典に簡単な説明があります。

http://e-words.jp/w/Ajax.html


Ajaxは、GoogleがGmailやGoogle MapsやGoogle Calendarにふんだんに取り入れたことで、最近注目を集めている技術です。

下記のサイトに詳しい説明が記載されています。

http://antipop.gs/docs/translations/ajax.html

id:akide

返信おそくなりました。

説明ありがとうございます。

2006/10/05 18:59:01
id:susie-t No.3

susie-t回答回数99ベストアンサー獲得回数182006/10/05 18:27:23

ポイント22pt

Ajaxはほぼ関係ないかと。。。>2の方

1の方の回答に機能を追加してみました。Netscape等でも動作させるためにはidのほかname属性も指定する必要があります。(ただ、個人的な好みを言うと、同一ドキュメント上でIDが重複してるのはかなり抵抗があります・・・。)

<html>
<head>
<title></title>
<style>
<!--
div{
  margin:20px;
  padding:10px;
}
#parent{
  background-color:blue;
  width:2000px;
  height:2000px;
  color:black;
}
#child1{
  background-color:yellow;
  width:200px;
  height:200px;
}
#child2{
  background-color:red;
  width:200px;
  height:200px;
}
td{
  border:solid blue 2px;
  height:100px;
  width:150px;
}
a{
  color:red;
}
-->
</style>

<script language="JavaScript">
<!--
flag = new Array();
tid = new Array();

function tree(num){
    var max;
    var tree_list;
    if(document.all){
      tree_list = document.all.item("tree");
    }else{
      tree_list = document.getElementsByName("tree");
    }
    var style = tree_list[num].style;
    if(flag[num] != null &amp;&amp; flag[num] == 1){
        flag[num] = 0;
        if(tid[num]) clearTimeout(tid[num]);
        tid[num] = setInterval(hide, 10);//増やすと隠蔽時のスピードが下がる
    }
    else{
        style.visibility = 'hidden';
        style.overflow = 'hidden';
        style.position = 'absolute';
        style.display = 'block';
        var tmp = style.height;
        style.height = '';
        max = tree_list[num].offsetHeight;
        if(tmp == '' || parseInt(tmp) == 0){
          style.height = '1px';
        }else{
          style.height = tmp;
        }
        style.visibility = '';
        style.position = '';
        flag[num] = 1;
        if(tid[num]) clearTimeout(tid[num]);
        tid[num] = setInterval(show, 10);//増やすと表示時のスピードが下がる
    }
    
    function show(){
        var height = parseInt(style.height);
        height += 2;//増やすと表示時のスピードが上がる
         if(height >= max){
            height = max;
            clearTimeout(tid[num]);
        }
        style.height = height + 'px';
    }

    function hide(){
        var height = parseInt(style.height);
        height -= 2;//増やすと隠蔽時のスピードが上がる
         if(height <= 1){
            style.display = 'none';
            clearTimeout(tid[num]);
        }
        style.height = height + 'px';
    }
}
//-->
</script>
</head>
<body>
           <!-- MENU 1の設定 -->

<SPAN onclick="tree(0)" style="cursor:hand">MENU 1</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
      ┣ <a href="リンク先URL">MENU1-1</a><BR>
      ┣ <a href="リンク先URL">MENU1-2</a><BR>
      ┗ <a href="リンク先URL">MENU1-3</a><BR>
</FONT></FONT>

          <!-- MENU 2の設定 -->
<BR>
<SPAN onclick="tree(1)" style="cursor:hand">MENU 2</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
      ┣ <a href="リンク先URL">MENU2-1</a><BR>
      ┣ <a href="リンク先URL">MENU2-2</a><BR>
      ┗ <a href="リンク先URL">MENU2-3</a><BR>
</FONT></FONT>

          <!-- MENU 3の設定 -->
<BR>
<SPAN onclick="tree(2)" style="cursor:hand">MENU 3</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
      ┣ <a href="リンク先URL">MENU3-1</a><BR>
      ┣ <a href="リンク先URL">MENU3-2</a><BR>
      ┗ <a href="リンク先URL">MENU3-3</a><BR>
</FONT></FONT></head>
</body>
</html>

参考になれば幸いです。

ダミーURL:http://q.hatena.ne.jp/

id:akide

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

サンプルでエラーがでてしまいます、、、、

2006/10/05 19:00:55
id:susie-t No.4

susie-t回答回数99ベストアンサー獲得回数182006/10/05 19:15:12

ポイント22pt

すみません、51行目の「&amp;&amp;」を「||」に変更してください。(検索かければ見つかると思います。なんでこんなことに・・・;;)

ダミーURL:http://q.hatena.ne.jp/

  • id:susie-t
    修正です。51行目は「||」じゃなくて「&&」です・・・。(すみません、疲れていたということで・・・。)

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません