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

Question

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

РЕДАКТИРОВАТЬ

Вот код th.

<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 или если есть горизонтальная прокрутка . Извините, если это слишком высокоуровневый и недостаточно пример кода, но этого должно быть достаточно, чтобы начать работу.

...

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