如何用SEMANTIC中的水平子菜单创建弹出菜单

Question

我想用SEMANTIC CSS点击下拉菜单时，我想创建水平子菜单。我只想像下面的图片。先谢谢你！

Answer 1

其实这不是一个下拉菜单，你要找的弹出窗口，你可以通过创建你的第一个菜单按钮，然后将其链接到您的弹出内容，如下所示创建水平方向的子菜单：

[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, 
    }) 
; 

在弹出的设置，你可以选择你的事件触发像on:'click'，它可以是这样的：焦点，悬停......，更多的设置，请参见Popup Settings。

[DOCS]