Horizontales Untermenü für ein vertikales Hauptmenü mit Bootstrap

Question

Gibt es eine Möglichkeit, ein horizontales Untermenü für eine vertikale Menüstruktur mit Bootstrap zu erstellen Ich habe keine Untermenüs mit vertikaler Ausrichtung des Hauptmenüs gesehen. Eine Beispielstruktur der Menüstruktur ähnelt dieser

Answer 1

Hier können here

HTML gefunden werden!

Dropdown-Menüs arbeiten mit verschachtelten „ul“, absoluten Positionen, und wir werden display: none;-display:block;, wenn sie mit Hover Bedarf ändern.

Etwas wie folgt aus:

<ul> 
    <li><a href="#">…</a> 
    <ul> 
     <li><a href="#">…</a> 
     <ul> … <!-- And so on. --> 
     </ul> 
     </li> 
    <li> 
</ul> 

Ihr Beispiel HTML

<nav id="main-nav"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Projects</a> 
     <ul> 
     <li><a href="#">Project 1</a> 
      <ul> 
      <li><a href="#">Project 2</a> 
       <ul> 
       <li><a href="#">Project 3</a> 
        <ul> 
        <li><a href="#">Project 4</a> 
         <ul> 
         <li><a href="#">Project 5</a></li> 
         </ul> 
        </li> 
        </ul> 
       </li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

Ihre explame des SCSS: (Ich habe sass, weil es einfacher ist, zu lesen und zu schreiben, aber ich werde auch unten ein CSS)

#main-nav{ 
    ul{ /* Those lines are used only for styling */ 
    margin: 0; 
    padding: 0; 
    border-right: 1px solid black; 
    width: 150px; 
    list-style-type: none; 
    li{ 
     position: relative; /* This is important when using absolute positions. */ 
     &:hover{ 
     &:before{ /* arrow styles */ 
       content: ""; 
       top: 0; 
       bottom: 0; 
       right: 0; 
       border-top: 5px solid transparent; 
       border-right: 5px solid #999; 
       border-bottom: 5px solid transparent; 
       border-left: 5px solid transparent; 
       position: absolute; 
       height: 0px; 
       width: 0px; 
       margin: auto; 
     } 
     > ul{ 
      display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */ 

      /*&:before { // I don't like this part but if you enable it, it will make child ul's look closer to your design. 
       content: ""; 
       position: absolute; 
       right: 0; 
       top: -65px; 
       bottom: -35px; 
       width: 1px; 
       background-color: #ccc; 
      }*/ 
     } 
     }//:hover 

     a{ /* Those lines are used only for styling */ 
     padding: 7px 10px; 
     display: block; 
     &:hover{ 
      color: red; 
     } 
     }// a 

     > ul{ /* This is what makes the magic happen. */ 
     display: none; /* Dropdown menus are always hidden, except when you hover it's li parent */ 
     position: absolute; /* This will position the ul */ 
     top: 0; 
     left: 100%; /* This will push the ul where it is needed. */ 
     border-right: 1px solid #ccc; 
     } 
    }// li 
    }// ul 
} 

Ein Live-Beispiel: https://jsfiddle.net/xwazzo/3spxxk1z/

Und die versprochene CSS Version:

#main-nav ul { 
    margin: 0; 
    padding: 0; 
    border-right: 1px solid black; 
    width: 150px; 
    list-style-type: none; 
} 

#main-nav ul li { position: relative; } 
#main-nav ul li:hover:before { 
    content: ""; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    border-top: 5px solid transparent; 
    border-right: 5px solid #999; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid transparent; 
    position: absolute; 
    height: 0px; 
    width: 0px; 
    margin: auto; 
} 

#main-nav ul li:hover > ul { display: block; } 
#main-nav ul li a { 
    padding: 7px 10px; 
    display: block; 
} 

#main-nav ul li a:hover { color: red; } 
#main-nav ul li > ul { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 100%; 
    border-right: 1px solid #ccc; 
} 

Answer 2

Dies könnte für Sie hilfreich sein.

<div class="container-fluid"> 
    <ul class="nav nav-justified navbar-default"> 
     <li class="dropdown"> 
     <a href="#" data-toggle="collapse" data-target="#one">One</a> 
     </li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="collapse" data-target="#two">Two</a> 
     </li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="collapse" data-target="#three">Three</a> 
     </li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="collapse" data-target="#four">Four</a> 
     </li> 
     <li class="dropdown"> 
     <a href="#" data-toggle="collapse" data-target="#five">Five</a> 
     </li> 
    </ul> 
</div> 
<div class="container-fluid"> 
    <nav id="submenu"> 
    <ul class="nav nav-justified"> 
     <li> 
     <ul class="nav nav-justified collapse" id="one"> 
      <li><a href="#" id="">One sub 1</a></li> 
      <li><a href="#" id="">One sub 2</a></li> 
      <li><a href="#" id="">One sub 3</a></li> 
      <li><a href="#" id="">One sub 4</a></li> 
     </ul> 
     </li> 
     <li> 
     <ul class="nav nav-justified collapse" id="two"> 
      <li><a href="#" id="">Two sub 1</a></li> 
      <li><a href="#" id="">Two sub 2</a></li> 
      <li><a href="#" id="">Two sub 3</a></li> 
      </ul> 
     </li> 
     <li> 
      <ul class="nav nav-justified collapse" id="three"> 
      <li><a href="#" id="">Three sub 1</a></li> 
      <li><a href="#" id="">Three sub 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <ul class="nav nav-justified collapse" id="four"> 
      <li><a href="#" id="">Four sub 1</a></li> 
      <li><a href="#" id="">Four sub 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <ul class="nav nav-justified collapse" id="five"> 
      <li><a href="#" id="">Link</a></li> 
      <li><a href="#" id="">Link</a></li> 
      </ul> 
     </li> 
    </ul> 
    </nav> 
</div> 

CSS:

.navbar { 
    margin-bottom:-1px; 
    border-radius:0; 
} 

    #submenu { 

     background-color: none; 
     margin-bottom:10px; 
     padding-bottom:15px; 
     margin-top:-20px 
     margin-left:10px; 
     margin-right:10px; 
     display:none; 
    } 

    .collapsing { 
     display:none; 
    } 
    #submenu.navbar { 
     background-color:transparent; 
     border:0; 
    } 

JS: Wir gehen

$('.collapse').on('shown.bs.collapse', function (e) { 
    $('.collapse').not(this).removeClass('in'); 
}); 

$('[data-toggle=collapse]').click(function (e) { 
    $('[data-toggle=collapse]').parent('li').removeClass('active'); 
    $(this).parent('li').toggleClass('active'); 
    $("#submenu").show(); 
});