動的ドロップダウンメニューの切り替え方向

Question

メインナビゲーションリンクの数がCMSに依存するjQueryを使用した動的なドロップダウンメニューがあります。ドロップダウンコンテナがウェブサイトのラッパーに触れると、サイドページが反転して右揃えになるので、メインのウェブページコンテナの外側にオーバーフローがないようにする方法はありますか？例としてhttp://online.wsj.com/home-pageを参照してください。ここで

EDIT

は番目のコードです。あなたはjQuery.fn.offsetを使用してjQuery(window).width()はそのleftオフセット成分と、メニューの幅の合計よりも多くのであり、それはありませんし、メニューがトリミングされている場合、その位置を更新するかどうかを確認するために比較することができます

<script> 
$("ul#navBar li span").click(function() { //When trigger is clicked... 
     //caching selectors 
     var $this = $(this), 
     $parent = $this.parent(), 
     $siblings = $parent.siblings(), 
     $dropdowns_siblings = $siblings.find('.dropdown'); 

     $this.next().toggle(); //toggles the dropdown on click 

     //hide other menus if visible 
     $dropdowns_siblings.hide(); 


     function rowWidth(){  
      //Calculate width of ul 
      var rowWidth = 0;  
      $parent.find("ul").each(function() {rowWidth += $(this).width(); });  

      //Set width of .dropdown 
      $parent.find(".dropdown").css({'width' : rowWidth}); 
      }; 
     return rowWidth(); 
</script> 

<div id="container"> 
<ul id="navBar"> 
    <li><a href="/">Link 1</a> <span></span> 
     <div class="dropdown"> 
      dynamiC# of cols 
     </div> 
    </li> 
<li><a href="/">Link 1</a> <span></span> 
     <div class="dropdown"> 
      dynamiC# of cols 
     </div> 
    </li> 
<li><a href="/">Link 1</a> <span></span> 
     <div class="dropdown"> 
      dynamiC# of cols 
     </div> 
    </li> 
<li><a href="/">Link 1</a> <span></span> 
     <div class="dropdown"> 
      dynamiC# of cols 
     </div> 
    </li> 
</ul> 

</div> 

Answer 1

ボタンの他​​の端（またはメニュートリガー）などに合わせるために、メニューの右端に配置します。ウィンドウがresizedになるか、または水平である場合はscrollingです。申し訳ありませんが、これは高レベルで十分なサンプルコードではありませんが、開始するには十分なはずです。

...

私はan example on JSFiddleであなたの問題を解決してきました。私はそれがあなたが探しているものだと思います。私はあなたの元のコードから、いくつかの非IE CSSセレクタを使って時間を節約するために欠けている多くのCSSを埋めました。私はまた、ほとんどのjsを書き換えました。間違いなく洗練の余地はありますが、うまくいきます。ウィンドウのサイズが変更されてもライブを調整するためにバインドしていませんでしたが、クリックバインディングと比較してエッジケースが多いと思います。