如何在 SEMANTIC 中创建带有水平子菜单的弹出菜单答案

【问题标题】：How to create popup menu with horizontal sub-menu in SEMANTIC如何在 SEMANTIC 中创建带有水平子菜单的弹出菜单
【发布时间】：2017-07-27 04:25:24
【问题描述】：

当我单击带有 SEMANTIC CSS 的下拉菜单时，我想创建水平子菜单。我只想像下面的图片。提前谢谢！

【问题讨论】：

标签： popup semantic-ui submenu popupmenu

【解决方案1】：

实际上这不是下拉菜单，您正在寻找 Popup ，您可以通过首先创建菜单按钮然后将其链接到您的 Popup Content 来创建水平子菜单，如下所示：

[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]

【讨论】：