Bootstrap dropdown extended dropdowns (вложенный)

Мне было интересно, можно ли расширить выпадающие списки. Я думаю, вы поймете, что я имею в виду, когда я описываю это, но я просто не знаю названия для него. Поэтому после открытия начального раскрывающегося списка. У вас могут быть дочерние элементы, которые могут открыть другое меню выпадающего меню, в этом случае направо, что может предоставить более точные параметры. Так, например ...Bootstrap dropdown extended dropdowns (вложенный)

Menu 
    v 
option1 -> precise1 
option2 precise2 
      precise3

В документации по компонентам, описывающей это поведение, похоже, ничего нет.

источник

2016-10-25 A. Lau

@HermLuna Я более или менее спрашивают, есть ли встроенные функциональные возможности, которые существуют для компонента уже. В противном случае я могу просто написать собственное раскрывающееся меню. –

Я не думаю, что bootstrap предлагает что-то подобное. Возможно, некоторые загрузочные плагины. Поскольку вы можете написать свой собственный. Почему бы не попробовать? Если вы обнаружили трудности. Поделиться. Итак, кто-то может вам помочь. В этом случае это больше касается исследований. –

Это то, что я написал для другого проекта.

HTML

<div class="dropdown"> 
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="#"> 
     Menu <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
     <li><a href="#">Option 1</a></li> 
     <li class="dropdown-submenu"> 
      <a tabindex="-1" href="#">Option 2</a> 
      <ul class="dropdown-menu"> 
       <li><a tabindex="-1" href="#">Precise 1 </a></li> 

       <li><a href="#">Precise 2</a></li> 
       <li class="dropdown-submenu"> 
        <a href="#">More precise </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Precise 3</a></li> 
         <li><a href="#">Precise 4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}

Codepen Example

источник

2016-10-25 09:32:58

Вау, это будет полезно в будущем. Благодаря! –

Bootstrap dropdown extended dropdowns (вложенный)

ответ

Смежные вопросы