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

javascriptの質問です。下記URLにドロップダウンメニューのコードが
あるのですが、デモで載っているスライドアップのコードが分かりません。
ドロップダウンのコードの、どの辺を変えたらスライドアップになるでしょうか。
分かる方がいましたら教えてください。
http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/

●質問者: rupopon
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript URL コード スライド デモ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● mattn
●27ポイント

ユーザ指定では出来ません。コードの中に

 if(dist <= 1 && d == 1){
 dist = 1;
 }

というコードがあり伸身方向が負の値であれば自分で出す方向を変えている様です。

◎質問者からの返答

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

ユーザ指定でなくて構いません。

スライドアップにするには、具体的にどのようなコードになるでしょうか。

教えて頂けるとありがたいです。


2 ● Reiaru
●27ポイント

単にコンペアしただけですので、どうしたら使い勝手が良くなるかまでは検討していません。

dropdown.js と dropdown.css を書き換える必要があります。


dropdown.css (定義の書き換え 2 項目)

.dropdown {float:left; padding-right:5px}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}

.dropdown {float:left; position:relative; padding-right:5px}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-bottom:none}

dropdown.js (2 箇所にそれぞれ 1 行追加)

// main function to handle the mouse events //
function ddMenu(id,d){
 var h = document.getElementById(id + '-ddheader');
 var c = document.getElementById(id + '-ddcontent');
 clearInterval(c.timer);
 if(d == 1){
 clearTimeout(h.timer);
 if(c.maxh && c.maxh <= c.offsetHeight){return}
 else if(!c.maxh){
//追加↓
 c.style.top = '-' + c.offsetHeight + 'px';
//追加↑
 c.style.display = 'block';
 c.style.height = 'auto';
 c.maxh = c.offsetHeight;
 c.style.height = '0px';
 }
 c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }else{
 h.timer = setTimeout(function(){ddCollapse(c)},50);
 }
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
 var currh = c.offsetHeight;
 var dist;
 if(d == 1){
 dist = (Math.round((c.maxh - currh) / DDSPEED));
 }else{
 dist = (Math.round(currh / DDSPEED));
 }
 if(dist <= 1 && d == 1){
 dist = 1;
 }
//追加↓
 c.style.top = parseInt(c.style.top.replace('px','')) - parseInt(dist * d) + 'px';
//追加↑
 c.style.height = currh + (dist * d) + 'px';
 c.style.opacity = currh / c.maxh;
 c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
 if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
 clearInterval(c.timer);
 }
}

実際には呼び出し時に ddMenu('one',1,0) などという形でもう一つの引数を与え、

それによって上下どちらに出すかを適宜選択できる形にすると良さそうですが。

◎質問者からの返答

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

使わせていただきます。


3 ● mattn
●26ポイント

ごめんなさい。間違ってました。

CSSで指定している様です。

.dropdown {float:left; padding-right:5px}

省略

.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}

となっている部分を

.dropdown {float:left; position:relative; padding-right:5px}

省略

.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-bottom:none}

と変えればうまく行くと思います。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



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