语义用户界面:侧边栏弹出菜单

Question

我正在尝试从侧边栏启动一个飞出类型菜单。 有什么想法/例子吗？ 想知道弹出窗口是否是一种选择？

例如：当用户将鼠标悬停在设置图标上时，我希望菜单"飞出"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

使用弹出窗口解决了这个问题..，

像这样的元素支持溢出不能让菜单延伸到侧边栏之外（"浮出"）。 因此，弹出窗口是唯一的选择。 定义一个弹出窗口，并在初始化弹出窗口的 javascript 中设置其弹出参数..，

例如：侧边栏：

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