Полная ширина выпадающее меню, независимо от зависания позиции Bootstrap

Question

В настоящее время я использую этот мега меню

http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html

Мне нужен полный ширина выпадающее меню, независимо от зависания позиции.

Во-первых, позвольте мне показать вам, что я наводил на выпадающее меню.

Как вы можете видеть, когда я парить на «4» COLS он не охватывает весь контейнер. Левая часть выпадающего меню отсутствует.

Я хочу, чтобы это была полная ширина, независимо от положения наведения.

Я достиг этого, изменив значение в файле custom.css.

http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css

/* drop-down menu */ 
.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    **left: -1px;** 
    z-index: 1000; 
    display: none; 
    float: left; 

Изменяя слева: -1px к слева: -120px я получил то, что я хочу

Однако на этот раз он не является ни чем-то динамичный и, возможно, отзывчивый.

Я полагаю, что ширина предыдущих пунктов меню должна быть рассчитана и записана в 'слева:? px ' автоматически или, допустим, программно, о чем я понятия не имею.

Возможно, это можно сделать, используя этот метод jquery.

How to find the width of the child ul li a

Кроме того, эти несколько примеров того, что я хочу. Мне просто нужно знать, как я буду модифицировать свою часть кода, чтобы быстро реагировать на поведение.

http://jsfiddle.net/jWSPz/4/ http://jsfiddle.net/jWSPz/9/

Answer 1

Во-первых, демо-сайт не гнездятся подменю в рамках текущего пункта меню, вместо этого, он имеет отдельный контейнер для подменю.

Во-вторых, должно быть какое-то использование JS, поскольку ваша страница реагирует, а также потому, что подменю вложены в ваши пункты меню.

Если вы хотели бы продолжить, вставьте JS JQuery фрагмент кода в вашу страницу (не может быть совершенным, как я закодированы это на лету, и не в состоянии проверить его на своей странице)

$(function() { 
    $('.nav').on('mouseover', '.dropdown', function() { 

     // Get width of .navbar-inner 
     var w = $('.navbar-inner').width(); 

     // Add 20px width due to padding gon .navbar-inner 
     w += 20; 

     $('.nav .dropdown-menu').each(function() { 
      // Get relative offset of parent 
      var o = $(this).parents('.dropdown').position().left; 

      // Add relative offset of .nav due to 20px padding on .navbar-inner +1px for border 
      o += 21; 

      // Set styles for .dropdown-menu 
      $(this).css({ 
       width: w, 
       left: -o // shift dropdown menu left (negative-sign) 
      }); 
     }); 
    }); 
}); 

Чтобы применить это в какой-то подменю только добавить пользовательский селектор класса (например: full-width) в строке 2:

Изменение линии 7 в:

 $('.full-width .dropdown-menu').each(function() { 

Применить пользовательский класс в пункт меню:

<li class="dropdown full-width"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th-large"></i>