динамическое выпадающее меню направление переключения

Question

У меня есть динамическое выпадающее меню, использующее jQuery, где количество основных навигационных ссылок зависит от CMS. Есть ли способ сделать это, если выпадающий контейнер касается обертки веб-сайта, тогда он переворачивает стороны и выравнивается по правому краю, поэтому нет переполнения за пределами основного контейнера веб-страницы? См. Пример http://online.wsj.com/home-page.

EDIT

Вот й код.

<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

Вы можете использовать jQuery.fn.offset и сравнить, чтобы увидеть, если jQuery(window).width() больше, чем сумма left составляющей этого смещения и ширина меню, и если это не так и меню обрезается, а затем обновить позиционирование меню для выравнивания с другим краем кнопки (или триггером меню) и т. д. Вы должны привязать эту функцию к срабатыванию, когда окно получает resized, или если есть горизонтальный scrolling. Извините, если это слишком высокий уровень и недостаточно кода примера, но этого должно быть достаточно, чтобы вы начали.

...

Я решил проблему с an example on JSFiddle. Я думаю, это то, что вы ищете. Я заполнил много недостающих CSS из вашего исходного кода, а некоторые селектора CSS, отличные от IE, чтобы сэкономить время. Я также переписал большую часть js. Конечно, есть место для изысканности, но оно работает хорошо. Я также не привязывал его к настройке вживую, когда изменяется размер окна, но я думаю, что это больше по сравнению с привязкой к кликам.