Question

我正试图从侧边栏启动一个Fly-out类型菜单。任何想法/例子？想知道弹出窗是否是一种选择？

例如：当用户将鼠标悬停在设置图标上时，我希望菜单能够通过3个选项“飞出”..，

<div id="mnuSideNav" class="ui vertical menu labeled icon inverted sidebar">
 <div id="mnuAdmin" class="item ">
    <i class="settings icon" title="Administrative Settings"></i>
    <div id="mnuAdminItems" class="inverted menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>
</div>

Answer 1

使用popup ..，

解决了这个问题

支持溢出的元素不能将菜单扩展到侧边栏之外（＆＃34; Fly-out＆＃34;）。弹出窗口是唯一的选择。定义一个弹出窗口并在javascript中初始化弹出窗口设置其弹出参数..，

Ex：SideBar：

<div id="mnuSideNav" class="ui left vertical menu labeled icon inverted sidebar">  
  <a id="sbAdmin" class="browse item popupMenu">
    <i class="settings icon" title="Administrative Settings"></i>       
  </a>
</div>

弹出

<div id="adminPopup" class="ui popup  ">
  <div class="ui one column relaxed equal height left aligned grid  ">
    <div class="ui column ">
      <h4 class="ui header">Admin Menu</h4>      
    </div>
  </div>
</div>

脚本：

$('.popupMenu').popup({
        popup: '#adminPopup',
        inline   : true,
        hoverable: true,
        position : 'right center',  
        delay: {show: 300, hide: 800}
    });

SemantiUI：侧边栏弹出菜单

1 个答案: