Comment créer un menu contextuel avec sous-menu horizontal dans SEMANTIC

Question

Je veux créer un sous-menu horizontal lorsque je clique sur le menu déroulant avec SEMANTIC CSS. Je veux juste comme l'image ci-dessous. Merci d'avance!

Answer 1

En fait, ce n'est pas un menu déroulant, vous cherchez Popup, vous pouvez créer votre sous-menu horizontal en créant d'abord votre bouton de menu, puis relier à votre contenu Popup, comme ce qui suit:

[Demo]

HTML

<div class="ui text menu"> 
    <div class="item"> 
    <img src="https://semantic-ui.com/images/new-school.jpg"> 
    </div> 
<!-- Your menu button --> 
    <a class="browse item"> 
    Browse Courses 
    <i class="dropdown icon"></i> 
    </a> 
<!-- /Your menu button --> 
</div> 

<!-- Your Popup Content --> 
<div class="ui flowing basic admission popup"> 
    <div class="ui three column relaxed divided grid"> 
    <div class="column"> 
     <h4 class="ui header">Business</h4> 
     <div class="ui link list"> 
     <a class="item">Design &amp; Urban Ecologies</a> 
     <a class="item">Fashion Design</a> 
     <a class="item">Fine Art</a> 
     <a class="item">Strategic Design</a> 
     </div> 
    </div> 
    <div class="column"> 
     <h4 class="ui header">Liberal Arts</h4> 
     <div class="ui link list"> 
     <a class="item">Anthropology</a> 
     <a class="item">Economics</a> 
     <a class="item">Media Studies</a> 
     <a class="item">Philosophy</a> 
     </div> 
    </div> 
    <div class="column"> 
     <h4 class="ui header">Social Sciences</h4> 
     <div class="ui link list"> 
     <a class="item">Food Studies</a> 
     <a class="item">Journalism</a> 
     <a class="item">Non Profit Management</a> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- /Your Popup Content --> 

JS (jQuery)

$('a.browse.item') 
    .popup({ 
    popup : $('.ui.flowing.basic.admission.popup'),//Popup Content selector 
    on : 'click', //Event trigger 
    position : 'bottom left', 
    lastResort:true, 
    }) 
; 

Dans les paramètres pop-up vous pouvez choisir votre événement déclencheur comme on:'click', il peut être soit comme: mise au point, vol stationnaire ..., pour plus de réglages, voir Popup Settings.

[DOCS]