Semantic ui （语义UI）如何制作固定的垂直左侧菜单

我想做一份固定在左边的菜单

我尝试了

侧边栏

，起初看起来不错，但很快我意识到如果内容比屏幕宽（并且没有滚动条），则无法完全显示

推送器中的内容


项目1
项目2
一个很长的句子，一个很长的句子，一个很长的句子，一个很长的句子，

如果我删除了
推送器
类，将显示广泛的内容，但现在
侧栏
覆盖了一些内容，这并不奇怪。似乎在语义用户界面中，侧边栏被设计为隐藏的，这样
推送器中的内容将被完全显示出来

制作固定左侧垂直菜单的“右”方法是什么？或者有什么方法可以让推送器中的内容完全显示出来（即使是滚动条也很有帮助）？
我已经检查了您所描述的内容，并回答了您的“制作固定左侧垂直菜单的“右”方法是什么？”问题。
这里是HTML

    <div class="ui top attached demo menu">
  <a class="item">
    <i class="sidebar icon"></i> Menu
  </a>
</div>
<div class="ui bottom attached segment">
  <div class="ui inverted labeled icon left inline vertical demo sidebar menu">
    <a class="item">
      <i class="home icon"></i> Home
    </a>
    <a class="item">
      <i class="block layout icon"></i> Topics
    </a>
    <a class="item">
      <i class="smile icon"></i> Friends
    </a>
    <a class="item">
      <i class="calendar icon"></i> History
    </a>
  </div>
  <div class="pusher">
    <div class="ui basic segment">
      <h3 class="ui header">Application Content</h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
</div>

有关详细信息，您可以查看此代码段；

希望你能处理好

    <div class="ui top attached demo menu">
  <a class="item">
    <i class="sidebar icon"></i> Menu
  </a>
</div>
<div class="ui bottom attached segment">
  <div class="ui inverted labeled icon left inline vertical demo sidebar menu">
    <a class="item">
      <i class="home icon"></i> Home
    </a>
    <a class="item">
      <i class="block layout icon"></i> Topics
    </a>
    <a class="item">
      <i class="smile icon"></i> Friends
    </a>
    <a class="item">
      <i class="calendar icon"></i> History
    </a>
  </div>
  <div class="pusher">
    <div class="ui basic segment">
      <h3 class="ui header">Application Content</h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
</div>

    $('.ui.sidebar').sidebar({
    context: $('.bottom.segment')
  })
  .sidebar('attach events', '.menu .item');