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

【javascript】

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

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

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

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

●質問者: PEPOTA
●カテゴリ:インターネット ウェブ制作
✍キーワード:Flash JavaScript ほと ゆっくり オーバー
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Kenju
●35ポイント

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

<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は値が大きいほど遅くなります。

◎質問者からの返答

試してみます。

ありがとうございます。

-----

メニュー

スローダウンメニュー

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

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


2 ● susie-t
●35ポイント

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

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

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

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>
◎質問者からの返答

試してみます。

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

関連質問


●質問をもっと探す●



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