语义UI侧边栏和下拉菜单

Semantic UI Sidebar & Dropdown menu

本文关键字：下拉菜单 侧边栏 UI 语义      更新时间：2023-09-26

我正在尝试创建一个带有语义ui的简单Web UI。

我想要一个侧边栏，在某些项目中有一个菜单，会有子项目......应该没那么难吧？

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

如何让子项目在正常页面内容上"飞出"侧边栏？如果您在示例中单击"消息"，将出现菜单（观察底部的滚动条以显示），但由于这些是侧边栏的子项，因此它们显示在侧边栏中。但我希望它们漂浮在正常内容上！我没有通过摆弄 z 索引来让它工作。

如果侧边栏配置为使用overlay过渡，可以通过指定 

.ui.sidebar {
    overflow: visible !important;
}

取自这里 http://jsfiddle.net/59174tt1/2/

它是 .ui.sidebar 上的位置：固定和溢出的组合。本文可能会有所帮助： http://css-tricks.com/popping-hidden-overflow。

另一种方法是使用手风琴将所有内容保留在侧边栏中。

相关文章：