【javascript】


http://www.templatemonster.com/
の一番上部の
マウスをオーバーしたときに上からゆっくりと降りてくるメニューを実現したいと思っています。

リンク先は、オーバー時にFLASHを使用していますが、
要望としては、FLASHなしでいいです。

ただし、ほとんどのブラウザで動くことが重要です。

できるだけシンプルなソースで、方法をご教授ください。

回答の条件
  • 1人2回まで
  • 登録:2006/08/25 11:43:49
  • 終了:2006/09/01 11:45:02

回答(2件)

id:Kenju No.1

Kenju回答回数30ベストアンサー獲得回数22006/08/25 16:18:39

ポイント35pt

こんな感じでいかがでしょう。

<script type="text/javascript">
<!--

function downMenuOn(thatObj)
{
  var downMenu = thatObj.getElementsByTagName("span")[1];
  downMenu.style.display = "block";

  changeSize(downMenu, 1, 100, 0, 0, 1);
}

function downMenuOff(thatObj)
{
  var downMenu = thatObj.getElementsByTagName("span")[1];

  changeSize(downMenu, -1, 0, 0, 0, 1);
}

function changeSize(thatObj, heightPlus, heightSize, widthPlus, widthSize, speed)
{
  var heightNumber = parseInt(thatObj.style.height) + heightPlus;
  var widthNumber = parseInt(thatObj.style.width) + widthPlus;

 //サイズが上限を超えたら補正。
  if(( heightNumber > heightSize && heightPlus > 0 ) || ( heightNumber < heightSize && heightPlus < 0 ))
    heightNumber = heightSize;

  if(( widthNumber > widthSize && widthPlus > 0 ) || ( widthNumber < widthSize && widthPlus < 0 ))
    widthNumber = widthSize;

 //縦、横のサイズをセット。
  thatObj.style.height = heightNumber + "px";
  thatObj.style.width = widthNumber + "px";

 //縦または横が0以下になったら表示しない。
  if( heightNumber <= 0 || widthNumber <= 0 )
    thatObj.style.display = "none";

 //再帰処理
  if( (heightSize != heightNumber && heightPlus != 0) || (widthSize != widthNumber && widthPlus != 0) )
    setTimeout(function(){changeSize(thatObj, heightPlus, heightSize, widthPlus, widthSize, speed)}, speed);
}

// -->
</script>
<div style="width:200px;" onMouseOver="downMenuOn(this)" onMouseOut="downMenuOff(this)">
<span>メニュー</span>
<span style="display:none; height:0px; width:200px; background-color:#80FF80;">スローダウンメニュー</span>
</div>

*speedは値が大きいほど遅くなります。

id:keijiro

試してみます。

ありがとうございます。

-----

メニュー

スローダウンメニュー

より下に書いたものが、一緒に動いてしまいます。

引き続き募集いたします。

2006/08/25 17:07:47
id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182006/08/25 18:19:41

ポイント35pt

あまりシンプルではないですが・・・。

init関数内(onloadイベント)でregistMenu関数を以下の引数で読んでください。

  • 見出しID
  • メニューID
  • 0.01秒ごとに伸縮するpx数

見出し要素にメニュー要素を含めて記述してください。

IE6とNetscape7.1では動作しました(spanメニューの回りこみ方が違いますが)。各メニューはできるだけ独立した要素にしてください。テーブルで繋げるの避けてください。表示位置が崩れます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<style>
<!--
div{
  border:solid blue 2px;
}
table{
  border:solid blue 2px;
}

-->
</style>
<script>
<!--
function getLocation(elem, XorY){
  var offset = (XorY.toUpperCase() == "Y") ? "offsetTop" : "offsetLeft";
  var ret = elem[offset];
  var pa = elem.offsetParent;
  while(pa){
    if(pa[offset]) ret += pa[offset];
    pa = pa.offsetParent;
  }
  return ret;
}
function getElementStyle(elemID, IEStyleProp, CSSStyleProp){
  var elem;
  if(typeof(elemID) == "string"){
    elem = document.getElementById(elemID);
  }else{
    elem = elemID;
  }
  if(elem.currentStyle){
    return elem.currentStyle[IEStyleProp];
  }else if(window.getComputedStyle){
    var compStyle = window.getComputedStyle(elem, "");
    return compStyle.getPropertyValue(CSSStyleProp);
  }
  return "";
}

function registMenu(captionId, menuId, size){
  var caption = document.getElementById(captionId);
  var menu = document.getElementById(menuId);
  var menuHeight = menu.offsetHeight;
  menu.style.position = "absolute";
  menu.style.overflow = "hidden";
  menu.style.top = (getLocation(caption, "Y") + caption.offsetHeight) + "px";
  menu.style.left = getLocation(caption, "X") + "px";
  var bw = getElementStyle(menu, "borderWidth", "border-width");
  if(bw.match(/(\d+)/)){
    bw = Number(RegExp.$1);
  }else{
    bw = 0;
  }
  menu.style.width = (caption.offsetWidth - bw * 2) + "px";
  menu.style.visibility = "hidden";
  caption.onmouseout = function(){hideElem(menu, size);}  
  caption.onmouseover = function(){showElem(menu, size, menuHeight);};
  
  var tid = null;
  function showElem(elem, size, end){
    if(tid){
      clearTimeout(tid);
      tid = null;
    }
    if(elem.style.visibility == "hidden"){
      elem.style.visibility = "visible";
      elem.style.height = "0px";
    }
    var next = Number(elem.style.height.match(/(\d+)/)[1]) + size;
    if(next >= end){
      elem.style.height = end + "px";
      tid = null;
      return;
    }
    elem.style.height = next + "px";
    tid = setTimeout(function(){showElem(elem, size, end);}, 10);
  }
  
  function hideElem(elem, size){
    if(elem.style.visibility == "hidden"){
      return;
    }
    if(tid){
      clearTimeout(tid);
      tid = null;
    }
    var next = Number(elem.style.height.match(/(\d+)/)[1]) - size;
    if(next <= 0){
      elem.style.height =  "0px";
      elem.style.visibility = "hidden";
      tid = null;
      return;
    }
    elem.style.height = next + "px";
    tid = setTimeout(function(){hideElem(elem, size);}, 10);
  }
}
function init(){
  registMenu("caption","menu", 1);
  registMenu("caption2","menu2", 1);
  registMenu("caption3","menu3", 1);
  registMenu("caption4","menu4", 1);
}
//-->
</script>
</head>
<body onload="init();">

<div id="caption">
CAPTION
<div id="menu">
<a>aaa</a><br/>
<a>bbb</a><br/>
</div>
</div>

<br/>
<br/>
<br/>

<span id="caption2">
CCCC
<div id="menu2">
<a>aaa</a><br/>
<a>bbb</a><br/>
</div>

</span>
<span id="caption3">
CCCC
<div id="menu3">
<a>aaa</a><br/>
<a>bbb</a><br/>
</div>
</span>

<span id="caption4">
CCCC
<div id="menu4">
<a>aaa</a><br/>
<a>bbb</a><br/>
</div>
</span>
</body>
</html>
id:keijiro

試してみます。

ありがとうございました。

2006/09/01 11:09:06
  • id:Kenju
    >より下に書いたものが、一緒に動いてしまいます。
    配置に関しては例えばスタイルシートで対応してください。
    position:absolute 等。
  • id:keijiro
    試してみます。
    ご丁寧にありがとうございます。

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

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

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

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