javascriptの質問です。下記URLにドロップダウンメニューのコードが

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

回答の条件
  • 1人2回まで
  • 登録:2009/12/02 16:03:32
  • 終了:2009/12/09 16:05:02

回答(3件)

id:mattn No.1

mattn回答回数104ベストアンサー獲得回数232009/12/02 16:09:52

ポイント27pt

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

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

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

id:rupopon

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

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

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

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

2009/12/02 16:17:09
id:Reiaru No.2

Reiaru回答回数152ベストアンサー獲得回数382009/12/02 16:49:00

ポイント27pt

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

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) などという形でもう一つの引数を与え、

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

id:rupopon

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

使わせていただきます。

2009/12/02 16:55:08
id:mattn No.3

mattn回答回数104ベストアンサー獲得回数232009/12/02 16:55:28

ポイント26pt

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

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}

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

id:rupopon

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

2009/12/02 18:01:11
  • id:mattn
    ごめんなさい。さらにjsも変えなければいけないようです。もう少し確認してから回答すればよかったです。><
  • id:Reiaru
    適宜上下を切り替える様にするバージョンです。

    /* dropdown.css に以下を追記 */

    .dropdown_upper {float:left; position:relative; padding-right:5px}
    .dropdown_upper ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-bottom:none}
    .dropdown_upper dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
    .dropdown_upper dt:hover {background:url(images/header_over.gif)}
    .dropdown_upper dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
    .dropdown_upper li {display:inline}
    .dropdown_upper a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
    .dropdown_upper a:hover {background:#d9e1e4; color:#000}
    .dropdown_upper .underline {border-bottom:1px solid #b9d6dc}

    -----------------------------------------------------------------

    // 面倒なので書き換えた dropdown.js 全てを以下に貼ります

    var DDSPEED = 10;
    var DDTIMER = 15;

    // main function to handle the mouse events //
    //function ddMenu(id,d){
    function ddMenu(id,d,upper_bottom){
     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){
       if (upper_bottom == 'upper'){
        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,upper_bottom)},DDTIMER);
     }else{
      h.timer = setTimeout(function(){ddCollapse(c,upper_bottom)},50);
     }
    }

    // collapse the menu //
    function ddCollapse(c,upper_bottom){
     c.timer = setInterval(function(){ddSlide(c,-1,upper_bottom)},DDTIMER);
    }

    // cancel the collapse if a user rolls over the dropdown //
    function cancelHide(id){
     var h = document.getElementById(id + '-ddheader');
     var c = document.getElementById(id + '-ddcontent');
     clearTimeout(h.timer);
     clearInterval(c.timer);
     if(c.offsetHeight < c.maxh){
      c.timer = setInterval(function(){ddSlide(c,1,upper_bottom)},DDTIMER);
     }
    }

    // incrementally expand/contract the dropdown and change the opacity //
    function ddSlide(c,d,upper_bottom){
     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;
     }
     if (upper_bottom == 'upper'){
      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);
     }
    }

    -----------------------------------------------------------------
    <!--
    HTML にメニューを設置する場合はこの様に書きます。
    'one' とか 'two' は名称ですので何でも構いません。
    -->

    <!-- 下側にメニューを出す場合 -->
    <dl class="dropdown">
     <dt id="one-ddheader" onmouseover="ddMenu('one',1,'bottom')" onmouseout="ddMenu('one',-1,'bottom')">Dropdown One</dt>
     <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1,'bottom')">
      <!-- (以下省略) -->

    <!-- 上側にメニューを出す場合 -->
    <dl class="dropdown_upper">
     <dt id="two-ddheader" onmouseover="ddMenu('two',1,'upper')" onmouseout="ddMenu('two',-1,'upper')">Dropdown Two</dt>
     <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1,'upper')">
      <!-- (以下省略) -->
  • id:rupopon
    ご親切な回答ありがとうございました。
    参考にさせていただきます。

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

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

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

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