bootstrap 3 отзывчивое множество мега-меню

Question

Я работаю с бутстрапом 3 и дизайном мега навигации меню.

HTML:

<div class="container"> 
    <nav class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 

      </button> <a class="navbar-brand" href="#">MegaMenu</a> 

     </div> 
     <div class="collapse navbar-collapse js-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> 

        <ul class="dropdown-menu mega-dropdown-menu row"> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">New in Stores</li> 
           <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
            <div class="carousel-inner"> 
             <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> 

              <h4><small>Summer dress floral prints</small></h4> 
              <button class="btn btn-primary" type="button">49,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
             <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> 

              <h4><small>Gold sandals with shiny touch</small></h4> 
              <button class="btn btn-primary" type="button">9,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
             <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> 

              <h4><small>Denin jacket stamped</small></h4> 
              <button class="btn btn-primary" type="button">49,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
            </div> 
            <!-- End Carousel Inner --> 
           </div> 
           <!-- /.carousel --> 
           <li class="divider"></li> 
           <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Dresses</li> 
           <li><a href="#">Unique Features</a> 
           </li> 
           <li><a href="#">Image Responsive</a> 
           </li> 
           <li><a href="#">Auto Carousel</a> 
           </li> 
           <li><a href="#">Newsletter Form</a> 
           </li> 
           <li><a href="#">Four columns</a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Tops</li> 
           <li><a href="#">Good Typography</a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Jackets</li> 
           <li><a href="#">Easy to customize</a> 
           </li> 
           <li><a href="#">Glyphicons</a> 
           </li> 
           <li><a href="#">Pull Right Elements</a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Pants</li> 
           <li><a href="#">Coloured Headers</a> 
           </li> 
           <li><a href="#">Primary Buttons & Default</a> 
           </li> 
           <li><a href="#">Calls to action</a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Accessories</li> 
           <li><a href="#">Default Navbar</a> 
           </li> 
           <li><a href="#">Lovely Fonts</a> 
           </li> 
           <li><a href="#">Responsive Dropdown </a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Newsletter</li> 
           <form class="form" role="form"> 
            <div class="form-group"> 
             <label class="sr-only" for="email">Email address</label> 
             <input type="email" class="form-control" id="email" placeholder="Enter email"> 
            </div> 
            <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
           </form> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
          <ul class="nav navbar-nav"> 
       <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection 2<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> 

        <ul class="dropdown-menu mega-dropdown-menu row"> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">New in Stores</li> 
           <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
            <div class="carousel-inner"> 
             <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> 

              <h4><small>Summer dress floral prints</small></h4> 
              <button class="btn btn-primary" type="button">49,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
             <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> 

              <h4><small>Gold sandals with shiny touch</small></h4> 
              <button class="btn btn-primary" type="button">9,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
             <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> 

              <h4><small>Denin jacket stamped</small></h4> 
              <button class="btn btn-primary" type="button">49,99 €</button> 
              <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
             </div> 
             <!-- End Item --> 
            </div> 
            <!-- End Carousel Inner --> 
           </div> 
           <!-- /.carousel --> 
           <li class="divider"></li> 
           <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Dresses</li> 
           <li><a href="#">Unique Features</a> 
           </li> 
           <li><a href="#">Image Responsive</a> 
           </li> 
           <li><a href="#">Auto Carousel</a> 
           </li> 
           <li><a href="#">Newsletter Form</a> 
           </li> 
           <li><a href="#">Four columns</a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Tops</li> 
           <li><a href="#">Good Typography</a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Jackets</li> 
           <li><a href="#">Easy to customize</a> 
           </li> 
           <li><a href="#">Glyphicons</a> 
           </li> 
           <li><a href="#">Pull Right Elements</a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Pants</li> 
           <li><a href="#">Coloured Headers</a> 
           </li> 
           <li><a href="#">Primary Buttons & Default</a> 
           </li> 
           <li><a href="#">Calls to action</a> 
           </li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Accessories</li> 
           <li><a href="#">Default Navbar</a> 
           </li> 
           <li><a href="#">Lovely Fonts</a> 
           </li> 
           <li><a href="#">Responsive Dropdown </a> 
           </li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Newsletter</li> 
           <form class="form" role="form"> 
            <div class="form-group"> 
             <label class="sr-only" for="email">Email address</label> 
             <input type="email" class="form-control" id="email" placeholder="Enter email"> 
            </div> 
            <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
           </form> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /.nav-collapse --> 
    </nav> 
</div> 

CSS:

body { 
    font-family:'Open Sans', 'sans-serif'; 
    background:#f0f0f0; 
} 
.navbar-nav>li>.dropdown-menu { 
    margin-top:20px; 
    border-top-left-radius:4px; 
    border-top-right-radius:4px; 
} 
.navbar-default .navbar-nav>li>a { 
    width:200px; 
    font-weight:bold; 
} 
.mega-dropdown { 
    position: static !important; 
    width:100%; 
} 
.mega-dropdown-menu { 
    padding: 20px 0px; 
    width: 100%; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
} 
.mega-dropdown-menu:before { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: absolute; 
    top: -15px; 
    left: 285px; 
    z-index: 10; 
} 
.mega-dropdown-menu:after { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: -17px; 
    left: 283px; 
    z-index: 8; 
} 
.mega-dropdown-menu > li > ul { 
    padding: 0; 
    margin: 0; 
} 
.mega-dropdown-menu > li > ul > li { 
    list-style: none; 
} 
.mega-dropdown-menu > li > ul > li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571429; 
    color: #999; 
    white-space: normal; 
} 
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { 
    text-decoration: none; 
    color: #444; 
    background-color: #f5f5f5; 
} 
.mega-dropdown-menu .dropdown-header { 
    color: #428bca; 
    font-size: 18px; 
    font-weight:bold; 
} 
.mega-dropdown-menu form { 
    margin:3px 20px; 
} 
.mega-dropdown-menu .form-group { 
    margin-bottom: 3px; 
} 

Теперь я ahve два <ul> для навигации меню. в обоих я вижу один sub menu. я имею в виду, если я нажимаю в коллекции. Или в коллекции 2 я вижу одно подменю.

как это можно исправить?

Проблема: click on collection and collection 2 u see one submenu bottom of collection not for collection 2.

Примечание: Положение стрелки должна быть изменена. Для обоих выпадающих стрелок вверх указывает ту же позицию. Это положение должно быть изменено, как

1. Первый раскрывающийся: http://i.imgur.com/Vklu5c1.png
2. Второй DropDown: http://i.imgur.com/97Lhca3.png

JSFIDDLE DEMO

Answer 1

Проблема возникает потому, что CSS треугольник позиционируется относительно общего navbar. Поскольку позиция этого элемента не изменяется, треугольник делает это для перестановки.

Идеальное решение заключается в встраивании треугольника в текущий выбранный элемент. Для достижения этой цели удалить

.mega-dropdown-menu:before { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: relative; 
    top: -15px; 
    left: 150px; 
    z-index: 10; 
} 
.mega-dropdown-menu:after { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: -17px; 
    left: 283px; 
    z-index: 8; 
} 

и заменить

.open .dropdown-toggle:after { 
    border-bottom: 15px solid #fff; 
    border-left: 17px solid transparent; 
    border-right: 17px solid transparent; 
    content: ""; 
    left: 163px; 
    position: absolute; 
    bottom: -21px; 
    z-index: 1500; 
} 
.open .dropdown-toggle span:after { 
    border-bottom: 17px solid #ccc; 
    border-left: 19px solid transparent; 
    border-right: 19px solid transparent; 
    content: ""; 
    left: -10px; 
    position: absolute; 
    bottom: -41px; 
    z-index: 8; 
} 

Это придает треугольник к тексту и вниз стрелки, и позиционирует его по отношению к этим элементам.

Fiddle - http://jsfiddle.net/7eHFd/4/

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

@media (min-width: 768px) { 
} 

Fiddle - http://jsfiddle.net/7eHFd/5/

Answer 2

Один выпуск решаемые здесь >>Mega drop down triangle

FullScreen View

проверил 1920 X 1080 Разрешение! Работает!

Работает на втором!

CSS

body { 
    font-family:'Open Sans', 'sans-serif'; 
    background:#f0f0f0; 
} 
.navbar-nav>li>.dropdown-menu { 
    margin-top:20px; 
    border-top-left-radius:4px; 
    border-top-right-radius:4px; 
} 
.navbar-default .navbar-nav>li>a { 
    width:200px; 
    font-weight:bold; 
} 
.mega-dropdown { 
    position: static !important; 
    width:100%; 
} 
.mega-dropdown-menu { 
    padding: 20px 0px; 
    width: 100%; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
} 
.mega-dropdown-menu-1:before { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: absolute; 
    top: -15px; 
    left: 30%; 
    z-index: 10; 
} 
.mega-dropdown-menu-1:after { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: -17px; 
    left: 30%; 
    z-index: 8; 
} 
.mega-dropdown-menu-2:before { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    z-index: 10; 
} 
.mega-dropdown-menu-2:after { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: -17px; 
    left: 50%; 
    z-index: 8; 
} 
.mega-dropdown-menu > li > ul { 
    padding: 0; 
    margin: 0; 
} 
.mega-dropdown-menu > li > ul > li { 
    list-style: none; 
} 
.mega-dropdown-menu > li > ul > li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571429; 
    color: #999; 
    white-space: normal; 
} 
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { 
    text-decoration: none; 
    color: #444; 
    background-color: #f5f5f5; 
} 
.mega-dropdown-menu .dropdown-header { 
    color: #428bca; 
    font-size: 18px; 
    font-weight:bold; 
} 
.mega-dropdown-menu form { 
    margin:3px 20px; 
} 
.mega-dropdown-menu .form-group { 
    margin-bottom: 3px; 
} 

Answer 3

Решение:JS Fiddle Solution Link

Информация:

Ссылаясь на this ссылку, вы не можете настроить п.с. udo класс css. Styling или Content, созданный: after или: before не является частью DOM и поэтому не может быть выбран или изменен.

Кроме того, это решение подходит для:

1. Адаптивный дизайн
2. меню стрелка, будет располагаться в центре пункта меню.

Вопросов:

Psudo класс CSS:

.mega-dropdown-menu:before { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: absolute; 
    top: -15px; 
    left: 285px; 
    z-index: 10; 
} 
.mega-dropdown-menu:after { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: -17px; 
    left: 283px; 
    z-index: 8; 
} 

Таким образом, для того же, `.mega-выпадающее меню класса» должен быть сбросить psudo пограничный стиль.

Решение:JS Fiddle Solution Link

И так, новый элемент должен быть добавлен, для которых имеет тот же дизайн, как под:

изменения CSS:

.show{ 
    display: block; 
} 
.arrow1, .arrow2 { 
    position: absolute; 
    z-index: 99999; 
    display: none; 
} 
.open .arrow1, .open .arrow2 { 
    display: block; 
} 
.arrow1 span:after, .arrow2 span:after { 
    content:""; 
    border-bottom: 15px solid #fff; 
    border-right: 17px solid transparent; 
    border-left: 17px solid transparent; 
    position: absolute; 
    top: 6px; 
    left: 2px; 
} 
.arrow1 span:before, .arrow2 span:before { 
    content:""; 
    border-bottom: 17px solid #ccc; 
    border-right: 19px solid transparent; 
    border-left: 19px solid transparent; 
    position: absolute; 
    top: 4px; 
} 
.mega-dropdown-menu:after, .mega-dropdown-menu:before{border: none;} 

JS Изменения:

$(".nav > li.mega-dropdown").eq(0).append("<p class='arrow1 arrOw'><span></span></p>"); 
$(".nav > li.mega-dropdown").eq(1).append("<p class='arrow2 arrOw'><span></span></p>"); 

$(".nav > li.mega-dropdown").eq(0).click(function() { 
    //x = $(".mega-dropdown.open").position(); 
    x = $(this).position(); 
    aa = x.left+75; 
    $(this).find(".arrow1").css("left", aa); 
}); 
$(".nav > li.mega-dropdown").eq(1).click(function() { 
    //x = $(".mega-dropdown.open").position(); 
    x = $(this).position(); 
    aa = x.left + 75; 
    $(this).find(".arrow2").css("left", aa); 
}); 

Если у вас есть другие вопросы, тогда, пожалуйста, добавьте комментарий ниже.

С уважением D.