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

以上の設定が Popup Settingsを見るために、...ホバー、フォーカス：ポップアップ設定で

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'のようなあなたのイベントトリガを選択することができ、それはどちらかのようなことができます。

[DOCS]