Semantisches UI-Dropdownmenü mit voller Breite

Question

Wie ist es möglich, ein Menü mit DropDown-Elementen in voller Breite (Mega-Menü) zu erstellen? Ich versuche ein Menü wie dieses zu erstellen example Ich habe versucht, Semantic UIs Popups zu verwenden, aber das funktioniert nur für den ersten Menüpunkt (Fehler: "Popup passt nicht in die Grenzen des Ansichtsfensters"). Ich würde bevorzugen eine Lösung mit Dropdown-Menüs, aber sie sind nicht die volle Breite des Bildschirms verwenden.

$('#menu1') 
 
    .popup({ 
 
    popup: '#menucontent1', 
 
    hoverable: true 
 
    }); 
 
    
 
    $('#menu2') 
 
    .popup({ 
 
    popup: '#menucontent2', 
 
    hoverable: true 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script> 
 
<div class="ui secondary pointing menu"> 
 
    <a class="browse item" id="menu1"> 
 
    Item 1</a> 
 
    <a class="browse item" id="menu2"> 
 
    Item 2</a> 
 
</div> 
 
<div class="ui fluid popup bottom left transition hidden" id="menucontent1"> 
 
    <div class="ui four column relaxed equal height divided grid"> 
 
    <div class="column"> 
 
     <h4 class="ui header">Fabrics</h4> 
 
     <div class="ui link list"> 
 
     <a class="item">Viscose</a> 
 
     </div> 
 
     <h4 class="ui header">Fabrics Level 2</h4> 
 
     <div class="ui link list"> 
 
     <a class="item">Cashmere</a> 
 
     <a class="item">Linen</a> 
 
     <a class="item">Cotton</a> 
 
     </div> 
 
    </div> 
 
    <div class="column"> 
 
     <h4 class="ui header">Size</h4> 
 
     <div class="ui link list"> 
 
     <a class="item">Small</a> 
 
     <a class="item">Medium</a> 
 
     <a class="item">Large</a> 
 
     <a class="item">Plus Sizes</a> 
 
     </div> 
 
    </div> 
 
    <div class="column"> 
 
     <h4 class="ui header">Colored</h4> 
 
     <div class="ui link list"> 
 
     <a class="item">Neutrals</a> 
 
     <a class="item">Brights</a> 
 
     <a class="item">Pastels</a> 
 
     </div> 
 
    </div> 
 
    <div class="column"> 
 
     <h4 class="ui header">Types</h4> 
 
     <div class="ui link list"> 
 
     <a class="item">Knitwear</a> 
 
     <a class="item">Outerwear</a> 
 
     <a class="item">Pants</a> 
 
     <a class="item">Shoes</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="ui fluid popup bottom left transition hidden" id="menucontent2"> 
 
    <div class="ui four column relaxed equal height divided grid"> 
 
    <div class="column"> 
 
     <h4 class="ui header">Fabrics</h4> 
 
    </div> 
 
    <div class="column"> 
 
     
 
    </div> 
 
    <div class="column"> 
 
     
 
    </div> 
 
    <div class="column"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie nicht brauchen jQuery für das, nicht einmal javascript: machte ich einen kleinen Fiddle für sie:

<div class="ui secondary pointing menu"> 
    <ul class="menu"> 
     <li> 
      <a class="browse item" id="menu1" data-target="#menucontent1"> 
       Item 1</a> 
      <div class="popup" id="menucontent1"> 
       <div class="ui four column relaxed equal height divided grid"> 
        <div class="column"> 
         <h4 class="ui header">Fabrics</h4> 
         <div class="ui link list"> 
          <a class="item">Viscose</a> 
         </div> 
         <h4 class="ui header">Fabrics Level 2</h4> 
         <div class="ui link list"> 
          <a class="item">Cashmere</a> 
          <a class="item">Linen</a> 
          <a class="item">Cotton</a> 
         </div> 
        </div> 
        <div class="column"> 
         <h4 class="ui header">Size</h4> 
         <div class="ui link list"> 
          <a class="item">Small</a> 
          <a class="item">Medium</a> 
          <a class="item">Large</a> 
          <a class="item">Plus Sizes</a> 
         </div> 
        </div> 
        <div class="column"> 
         <h4 class="ui header">Colored</h4> 
         <div class="ui link list"> 
          <a class="item">Neutrals</a> 
          <a class="item">Brights</a> 
          <a class="item">Pastels</a> 
         </div> 
        </div> 
        <div class="column"> 
         <h4 class="ui header">Types</h4> 
         <div class="ui link list"> 
          <a class="item">Knitwear</a> 
          <a class="item">Outerwear</a> 
          <a class="item">Pants</a> 
          <a class="item">Shoes</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </li> 
     <li> 
      <a class="browse item" id="menu2" data-target="#menucontent2"> 
       Item 2</a> 
      <div class="popup" id="menucontent2"> 
       <div class="ui four column relaxed equal height divided grid"> 
        <div class="column"> 
         <h4 class="ui header">Fabrics</h4> 
        </div> 
        <div class="column"> 

        </div> 
        <div class="column"> 

        </div> 
        <div class="column"> 

        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

und die CSS:

.menu { 
    list-style: none; 
} 
.menu li { 
    float: left; 
    margin-right: 1em; 
} 
.popup { 
    background-color: #fff; 
    position: absolute; 
    border-radius: 5px; 
    border: 1px solid grey; 
    left: 0; 
    right: 0; 
    opacity: 0; 
    transition: opacity 0.5s ease; 
    padding: 1em; 
} 

.item:hover~div { 
    opacity: 1; 
}